【CSS】スマホサイト用にレスポンシブな横スクロールのメニューを設置する方法

      2016/09/22

eye_20160815

スマホサイトといえば三本線の「ハンバーガーメニュー」が定番ですが、最近ではメニューを表示したまま横スクロールさせるサイトも見かけるようになってきました。

タップしなくてもメニューが表示されているので、ハンバーガーメニューよりも気付いてもらいやすくなるかもしれませんね。

でも「横にスクロールするよ」っていうのが分かりやすくないと、隠れている部分に気付かない人もいるかもしれません。

ということで、ユーザーが分かりやすく、使いやすいレスポンシブな横スクロールナビゲーションを作ってみたのでご紹介します。
HTMLとCSSだけなので簡単ですよ♪

スポンサーリンク

横スクロールメニューって何よ?

まずはどんなメニューを作るのか見てください。
PCだとこんな感じの普通のメニューです↓

20160815a

そしてウィンドウの幅が狭くなると、横スクロールするようになります。
スマホで見るとこんな感じ↓

20160815b

どうですか?良い感じでしょ?
右側に固定のアイコンを置くことで「こっちにまだあるよ〜」と隠れている部分に気付いてもらいやすくしています。

appleのサイトでも横スクロールのナビゲーションが使われていますね↓

20160815c

では早速やっていきましょう。

横スクロールメニューの設置方法

HTML

コードは単純なので難しくはありません。
HTMLはこちら↓

「<div class="next-btn"></div>」この赤い部分が右側に固定して表示するやつです。
今はサンプルなので簡単に にしてますけど、アイコンフォントとか使っても良いと思います。

CSS

続きましてCSSがこちら↓

これで完成なんですけど、上記のCSSはメニューの数が7つの場合で調整しています。
下から6行目のコードでメニューの幅を調整できます↓

これがメニュー4つで25%、5つで20%、6つだと16.66%になります。
メニュー全体の幅と、メニュー個別の幅はサイトのデザインやメニューの数によって調整してください。

あとは背景や文字色を変えればもっと良い感じになると思います(^^)

メニューにボーダーで区切り線を入れたい場合

メニュー同士をボーダーで区切りたい場合はCSSの「隣接セレクタ」を使うと簡単です。
隣接セレクタは簡単に言うと2番目以降の要素だけにCSSを適用することができます。

まずはこのようにボーダーで全て囲む場合↓

menu-border-b

CSSはこのようになります↓
一度メニュー全ての左右にボーダーを引いて、隣接セレクタで2番目以降だけ左のボーダーを無効にしています。

 

次に左右の端はボーダーを引かない場合↓

menu-border-a

CSSはこれだけです↓
2番目以降のメニューの左側にボーダーを引いています。

「 box-sizing: border-box; 」でボーダーの幅もwidthの指定内に含まれるようにしているのもポイントです。区切り線を入れたい方は試してみてくださいね。

まとめ

実は先日「STINGERのヘッダーメニューをスマホでも表示したままにしたい」というコメントを頂いたので作ってみました。

今度はこれをSTINGER7に実装する方法をご紹介したいと思います。

ではまた〜♪

スポンサーリンク

この記事をシェアする!

 - WEB制作