About This Site

ハンバーガー廃止⇒画面幅でメニュー数が増減するナビゲーション

ブログ運営

今までスマホサイトではハンバーガーメニューを採用していましたが、画面幅に合わせてメニューの数が変わるナビゲーションメニューに変更しました。htmlとcssのコードを紹介するので、好みで修正して使ってください。

ハンバーガーメニューをやめた理由

ハンバーガーメニューは画面の狭いスマホ用によく使われています。ボタンクリックでメニューが開閉するトグルメニューです。

私がハンバーガーメニューを廃止した理由は次の2つです。

  • 位置によっては片手で操作できない
  • 1ステップでできることが2ステップになり面倒

片手操作できない

スマホの画面サイズは様々で、手の大きさも様々。片手操作する人や両手操作する人もいる。全ての人が使いやすいデザインであり、邪魔にならないけど見つけやすい場所というのが難しかったです。

手順が増える

アプリのUIを決めるときにも、なるべくタップする回数が少なく済むことが良いアプリと言われています。シェアボタンをトグルにしたらシェア回数が激減したという話も聞きますし、タップ回数は1回でも少なくした方が良いです。


ナビゲーションメニューのhtml

下記のコードがhtmlです。ヘッダーのタイトル下に貼り付けてください。

<nav class="menu-container">
<ul class="menu">
<li class="menu-item"><a href="URL">メニュー名</li>
<li class="menu-item"><a href="URL">メニュー名</li>
<li class="menu-item"><a href="URL">メニュー名</li>
<li class="menu-item"><a href="URL">メニュー名</li>
<li class="menu-item"><a href="URL">メニュー名</li>
<li class="menu-item"><a href="URL">メニュー名</li>
</ul>
</nav>

ナビゲーションメニューのcss

サイトに合わせて適宜調整してください。下の例では、828pxより狭くなったときに5番目のメニューが、640より狭くなったときに3番目のメニューが非表示になります。

nav.menu-container {
margin: 30px 0;
}
.menu-container .menu {
display: -webkit-flex;
display: flex;
list-style: none;
padding: 0;
max-width: 1000px;
margin: 0 auto;
}
.menu-container .menu .menu-item {
flex: 1;
}
@media screen and (max-width: 828px) {
.menu-container .menu .menu-item:nth-child(5){
display:none;
}
}
@media screen and (max-width: 640px) {
.menu-container .menu .menu-item:nth-child(4){
display:none;
}
}

:nth-child(n+4)にすれば4番目以降、:last-childにすれば最後の要素を非表示にできます。〇番目系の指定の仕方は下記のサイトが参考になります。

スマホの画面サイズが知りたい場合は下記のサイトを参考にしてください。

以前設定していたトグルメニューのコードは下記の記事で紹介しています。

ナビゲーションメニュー実装&jQueryが動かない場合の対処方法

コメント

タイトルとURLをコピーしました