スマートフォンで簡単に横スクロールメニューを導入する方法

smartphone-yokoscroll

最近スマートフォンで横スクロールを導入しました。スマートフォンの表示の時には右上にバーガーボタンをおいているのですが、これじゃわからない人が多くいると思ってバーガーボタンはそのままおきつつ、横スクロールでもう少しわかりやすくなるようにしました。

いや意外とこれが結構簡単でした。

一応ソースコードもコピペ出来るようにしておりますので、ぜひみなさんも横スクロールを導入してみてください。今は横スクロールで見せる時代ですよ!

sponsored

スマートフォンで横スクロールを導入する!

まずはJavascriptを導入

jqueryとiscrollというJavascriptをいれます。導入のコードはこちら

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iscroll.js"></script>

僕の場合はJqueryはヘッダーにいれて、iscrollはフッターに入れました。本当はどちらもフッターに入れたいのですが、Jqueryは上の方にないと出来ないJavascriptとかもあるので・・・

そして以下のJavascriptも入れました。

<style type='text/css'>img#wpstats{display:none}</style><script type="text/javascript">
$(document).ready(function () {
 
    var element = $(".scroll_x")[0];
 
    var scroll_x = new iScroll(element, {
 
        // 慣性スクロール禁止
        bounce: false,
 
        // スクロール領域からの画面全体の縦スクロールを有効に
        onBeforeScrollStart: function(){}
    });
});
</script>

ここまででほとんど準備は完成です。

あとはスクロールしたいメニューを入れます。

webledgeの場合は以下のようなメニューを横スクロールに指定しています。

<div class="scroll_x pcnone">
        <ul class="imp">
             <li class="navli"><a href="https://webledge-blog.com/category/wordpress/">wordpress</a></li>
             <li class="navli"><a href="https://webledge-blog.com/category/camera/">カメラ</a></li>
             <li class="navli"><a href="https://webledge-blog.com/category/date-plan/">デート</a></li>
             <li class="navli"><a href="https://webledge-blog.com/category/diary/">日常</a></li>
             <li class="navli"><a href="https://webledge-blog.com/category/seo/">SEO</a></li>
             <li class="navli"><a href="https://webledge-blog.com/category/web/">Web</a></li>
             <li class="navli-last"><a href="https://webledge-blog.com/category/convenient-service/">便利サービス</a></li>
        </ul>
</div>

tableなどでも横スクロールは実現出来るのですが、たいていはメニューで実現するのが多いかなと思ってlistに反映させました。横スクロールを実現する範囲としてはscroll_xという部分が指定されます。

ちなみに、divの要素のclassにpcnoneというのをいれていますが、これはCSSでpcのときだけdisplay:none;にするためにつけているものです。(以下のCSSには含めていないです。)

CSSは下のような感じにしています。

.navli{
display:inline-block;
float:left;
padding: 0px 10px;
margin: 5px 0;color:#000!important;
border-right:1px dotted #ccc;
}
.navli-last{
display:inline-block;
float:left;
padding: 0px 10px;
margin: 5px 0;color:#000!important;
}
.navli a{
color:#000!important;
text-decoration:none;
}
.navli-last a{
color:#000!important;
text-decoration:none;
}
 
/* 要素からの相対位置 */
.scroll_x {
  position: relative;
  padding: 2px 0 5px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #ddd;
}

という感じ。リストの要素はdisplay:inline-block;を聞かせてfloat:left;で左によせられるようにしております。

ただ、inline-blockは変な隙間が出来てしまう事があるので、その隙間を消したい人は以下の記事を参考にしてください。→inline-blockの隙間をなくす方法

まとめ

最近スマートフォンファーストなサイトが主流になってきて、それと同時に横スクロールのメニューを導入するサイトも多くなってきました。

バーガーボタンって確かに見にくいですからね・・・・今後はやはり横スクロールのメニューというものが主流になってくるきがします。

出遅れないように、サイトの変更をしておきましょうね!

-ブログ運営
-