WEBサイトのナビメニューをスマホ版で横スクロールさせる

グローバルメニューである横並びメニューはPCモニター向けに設置されたメニューなので、スマホ版でそのままは使えません。

画面幅の狭いスマホでもナビゲーションバーを横スクロールさせる事ができれば、スマホ向けボタンなどを準備する必要がありません。

width: max-content;で折り返しさせずに全てを表示させ、overflow: auto;で隠れた部分を表示するのがポイントです。

スマホ版でPC版と同じメニューを使う

PC版のWEBサイトで上部に並ぶのが、いわゆるグローバルメニューですね。

PCの様に画面が広いことを想定された横並びメニューです。

ただしスマホ版では当然画面幅が狭くなるため、そのままでは使う事はできません。

この横並びメニューは消して、専用のメニューボタンを用意するのがほとんどでしょう。

サイトによって様々ですが、ボタンを押すと縦に並べてメニューが展開される訳です。

シンプルに横並びを維持

正直、わざわざ専用のメニューボタンを押すのが面倒な人もいます。

そんなに大規模でないWEBサイトであれば、なおの事でしょう。

メニューボタンを押して、次に行きたいページのメニューを押して、と二度手間になるからです

横並びメニューを残す

そこで本記事では、スマホ版でも横並びメニューを残し、画面に入らない部分は横スクロールで表示させる方法についてご紹介します。

つまりメニューバー自体を指で横に動させる様にする訳です。

そうすれば、スマホ版のメニュー構造をわざわざ導入する必要がなくなりますね。

実装方法

では早速実装をしてみましょう。

横並びメニュー部分は以下の様にul、liタグで構成しています。

今回は横スクロールに焦点を置いているので、サブメニュー（プルダウンメニュー）などは無視した形にしています。

ソースコード

HTML

通常のメニュー構造のHTMLソースです。画面に収まらない様、あえて多めに並べています。

<div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">HTML</a></li> <li><a href="#">SEO</a></li> <li><a href="#">WEBWORKS</a></li> <li><a href="#">セキュリティ</a></li> <li><a href="#">WORDPRESS</a></li> <li><a href="#">FREELANCE</a></li> <li><a href="#">その他</a></li> </ul> </div>

CSS

上記ソースに対して設定するCSSです。

.nav { background-color: #000; overflow-x: auto; } .nav ul { display: flex; width: max-content; margin: 0 auto; } .nav ul li a { display: flex; align-items: center; justify-content: center; display: inline-block; padding: 10px 25px; height: 50px; font-size: 15px; color: #fff; text-decoration: none; } .nav ul li a:hover { background-color: #cc0000; }

解説

いたってシンプルなCSSになっています。

liタグはdisplay: flexで横に並ぶようにし、項目は全て中央寄せで設定しています。

指でスクロールさせる事を前提としているので、ナビゲーションは適度な高さを維持しています。

CSSのポイント

横スクロールを実現している部分は以下の2つです。

width: max-content;

通常、要素は親要素の外に出ないので、親要素の幅を超えそうになると折り返しされるのが普通です。

そこで折り返しされずに突き抜ける様にするのが「maz-content」です。

maz-contentを設定すると、表示幅を超えていてもコンテンツが全く折り返されません。

これにより画面幅に関係なく、メニューがどこまでも横並びする事になります。

この機能を利用して、スマホ版でも横並びを維持させる訳です。

画面幅を超えた分の要素を、overflow-x: auto;でスクロールさせている訳です。

実装サンプル

実際のサンプルが以下となります。

iframe内で表示

上記の様にiframeで埋め込むと画面自体が狭いため、既にスクロールバーが出た状態になっていますね。

スマホで直接確認した場合は横スクロールは出ませんが、指で動かす事ができます。

以下のリンクから、別ページで確認することができます。

一押し人気コーナー紹介