あなたの生活をちょっと豊かにするLIFE STYLEマガジン【WEBLEDGE(ウェブレッジ)】

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

   

smartphone-yokoscroll

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

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

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

スポンサーリンク

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

まずはJavascriptを導入

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

次回記事の予告!

素の髪質でナチュラルなセットを!資生堂のパウダーワックス「パウダーシェイク」のレビューを執筆中!

↓↓気になる方は登録を!

 - Web知識 , , , ,

PAGE TOP