今回はCSSのみで作るスマホ表示の場合に横にスクロールするナビゲーションメニューの作り方を解説します。
メニュー項目が長くなっても横にスクロールし、フリックで全ての項目を見ることができます。
コピペで簡単に設置できますので、ぜひ試して下さい。
表示サンプル
PCでは全ての項目がみれます。
スマホの場合、メニューが横スクロールになります。
※スマホで見るとメニューが横スクロールします。
※PCで見る場合はウィンドウサイズを狭くしてみてください。
HTML
<div class="wrapper"> <div class="content"> <header class="header"> <h1 class="h1">スクロールナビ</h1> </header> <nav class="navigation"> <a class="navigation-item" href="#">ホーム</a> <a class="navigation-item" href="#">実績</a> <a class="navigation-item" href="#">自己紹介</a> <a class="navigation-item" href="#">連絡先</a> <a class="navigation-item" href="#">免責事項</a> <a class="navigation-item" href="#">リンク</a> </nav> </div> </div>
CSS
@charset "UTF-8"; html, body { height: 100%; } body { background: #ccc; } .wrapper{ display: flex; align-items: center; justify-content: center; height: 100%; } .content { position: relative; height: 450px; max-width: 800px; min-width: 300px; width: 100%; background: #e6e6e6; -webkit-overflow-scrolling: touch; } .header { display: flex; justify-content: center; align-items: center; height: 100px; background: rgba(57,146,212,1.00); } .h1 { font-weight: bolder; color: #fff; } .navigation { display: flex; justify-content: space-between; align-items: center; width: 100%; list-style: none; overflow-x: auto; background: #fff; border-bottom: 1px solid #ccc; } .navigation-item { padding: 20px 30px; color: #333; word-break: keep-all; text-decoration: none; } .navigation-item:hover { color: #666; }
まとめ
ぜひお試しください。
※スマホで見るとメニューが横スクロールします。
※PCで見る場合はウィンドウサイズを狭くしてみてください。