ハンバーガーメニューとは？デザイン例とスマホだけに表示する方法
2020.10.20
スマホでPC版におけるグローバルナビの代わりになっているのがハンバーガーメニュー。ハンバーガーメニューは画面表示が少ないスマホサイトでは大変役立ちます。
ただ何も考えずに実装するとPC版に使いにくいなどのデメリットもあります。今回は、ハンバーガーメニューについてご紹介していきます。
ハンバーガーメニューとは？どんな時に使うの？
ハンバーガーメニューとはどんなものなのか？具体的に使うシーンをご紹介します。
ハンバーガーメニューとは？
ハンバーガーメニューは、主に3本の線で構成されています。その形がハンバーガーに似ていることから、ハンバーガーメニューともハンバーガーアイコンと呼ばれています。
多くのサイトは3本線ですが、まれに4本線や2本線で構成しているものもあります。
ハンバーガーメニューはどんな時に使うのか？
ハンバーガーメニューは主に、スマホサイトでメニューを表示させるときに使います。たまにPCサイトでもハンバーガーメニューを表示させているところもありますが、主に画面が狭いスマホやタブレット端末でグローバルナビなどのナビゲーションメニューで使われています。
ハンバーガーメニューのメリット・デメリット
ハンバーガーメニューのメリットとデメリットは以下のとおりです。
ハンバーガーメニューのメリット
少ないスペースでメニューを表示することが可能
特に表示エリアが少ないスマホにおいて、PC版と同様のグローバルメニューを設置してしまうと、画面がメニューで占有されてしまい、ファーストビューで、本来訴えたいコンテンツが表示できなくなります。
ハンバーガーメニューなら、少ないスペースでメニュー表示が可能ですので、その分本来訴えたいコンテンツをファーストビューで表示することが出来ます。
多くのスマホサイトで採用されている
FacebookやYAHOO！などメジャーなサイトの多くのスマホサイトで使われています。そのため、ユーザーとしては「三本線があったらメニュー」と認識されやすくなります。
ただ全てのサイトで使われているわけではないので、例えば初めてスマホを使った人や、メニューであることに気づかない可能性もあります。
表示項目数に制限がない
PC版でよく見かけるナビゲーションメニューだと、画面に表示できる数に限界(おおよそ5～7個程度)があります。文字を小さくすれば数は増えますが、今度はボタンが押しにくい、誤操作が発生してしまいます。
ハンバーガーメニューなら、縦に並べて、スクロールできるようにすれば、メニューをいくらでも表示できます。
特に、後からメニューを追加したい場合は、レイアウトの変更をすることなくできるので、メンテナンス性という意味でも優れています。
ハンバーガーメニューのデメリット
PC版に設置するとメニューがわからない
スマホでは有効なハンバーガーメニューですが、PC版に設置すると目立ちにくく、メニューがどこにあるのか、どんなメニューがあるのか分からなくなってしまいます。
そのため、PC版は、ナビゲーションが表示されているメニューを表示させ、スマホ版はハンバーガーメニューといったようにメニューの表示をデバイスで分けたほうが良いです。
ページ遷移がPCと比べて非効率になりがち
ハンバーガーメニューの遷移はたいてい、タップしてメニュー一覧を表示、その次に遷移したいメニューに遷移する形となり、PC版だと1遷移済むところ、ハンバーガーメニューは2遷移必要です。
そのため、以下のように、ハンバーガーメニューの下に、よく使われるメニューをナビゲーションとして表示するとより親切となります。
一見すると何を表示しているのか分からない
メリットの項目でも紹介しましたが、一見すると3本線なので何を占めているのか分からないです。そのため、以下のように3本線+MENUと表示させると初心者でも何を表示しているのか分かります。
ハンバーガーメニューの作り方
ハンバーガーメニューはhtmlとcssだけでできます。なおスマホだけ表示させるのも、cssだけでコントロール可能です。
<!--▼グローバルナビ-->
<div id="a-top"></div>
<div id="global-nav">
<dl id="global-nav-in">
<dt class="btn-gnav"></dt>
<dd class="menu-wrap">
<ul id="menu" class="menu">
<li id="menu-item-31" class="first menu-item menu-item-type-post_type menu-item-object-page menu-item-31 even" style="z-index: 1000;"><a href="https://pecopla.net/sample-page/">サンプルページ</a></li>
<li id="menu-item-2600" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2600 odd" style="z-index: 990;"><a href="https://pecopla.net/sample-page2/">サンプルページ2</a>
</li>
<li id="menu-item-2397" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-2397 even" style="z-index: 980;"><a href="https://pecopla.net/sample-page3/">サンプルページ3</a></li>
<li id="menu-item-3165" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3165 odd" style="z-index: 970;"><a href="https://pecopla.net/sample-page4/">サンプルページ4</a></li>
<li id="menu-item-2339" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2339 even" style="z-index: 960;"><a href="https://pecopla.net/sample-page5/">サンプルページ4</a></li>
</dd>
</dl>
</div>
</div>
/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/
#global-nav{
border-top: 0;
border-bottom: 0;
}
#global-nav dt{
background: url(./images/icon/menu.png) 1em center no-repeat #99179c;
color: #fff;
font-size: 1.4em;
border-bottom: solid 1px #c43ec7;
background-size: 20px;
background-position: 95%;
}
#global-nav #global-nav-in .menu-wrap{ display:none; }
#global-nav #global-nav-in #menu{ margin-bottom: 0; }
#global-nav #global-nav-in #menu,
#global-nav #global-nav-in #menu li{
width: 100%;
border: 0;
}
#global-nav #menu li.first{ border-left: 0; }
#global-nav #global-nav-in #menu li{
border-bottom: 1px solid #c43ec7;
background-color: #fff;
white-space: normal;
border-top: #6d116f solid 1px;
}
#global-nav #global-nav-in #menu li.first{ border-left: 0; }
#global-nav #global-nav-in #menu ul{
position: static;
width: auto;
padding-left: 10%;
}
#global-nav #global-nav-in #menu ul li{ width: 100%; }
#global-nav #global-nav-in #menu ul li:last-child{ border-bottom: 0; }
/*メニューのデザイン*/
#global-nav #global-nav-in #menu li a:link,
#global-nav #global-nav-in #menu li a:visited,
#global-nav #global-nav-in #menu li a:hover,
#global-nav #global-nav-in #menu li a:active{ background: url(./images/icon/icon-arrow04.png) 1em 1em no-repeat #99179c; }
#global-nav #global-nav-in #menu ul li a{ width: auto; }
#global-nav .btn-gnav{
display:block;
padding: 0.2em;
cursor: pointer;
}
#main-image .catch-copy{ font-size: 1.4em; }
/* スマホスタイル調整新規 */
/* nav */
dl#global-nav-in {
width: 100%!important;
margin: 0!important;
box-sizing: border-box;
padding-left: 0;
}
#global-nav {
position: relative;
height: auto;
}
#global-nav img {
width: 70px;
position: absolute;
left: 5px;
top: 5px;
}
#global-nav .menu-wrap{
padding: 0;
}
#global-nav .btn-gnav {
display: block;
padding: 0.2em;
cursor: pointer;
height: 28px;
}
#global-nav #menu li a {
border-left: none;
}
.pc{
display: none;
}
.sp{
display: block;
}
}
ワードプレスで簡単にハンバーガーメニューを設定する方法
上記方法でハンバーガーメニューは作成しますが、HTMLやCSSの知識がないと作成できません。
ただ、ワードプレスで作成する場合は、「WP Responsive Menu」というプラグインが用意されています。
このプラグインを使うことで、簡単にしかもスマホ版にだけハンバーガーメニューを表示することが出来ます
WP Responsive Menuのインストールはこちらから
まずは有効化する
WP Responsive Menuをインストールしたら、「有効化」しましょう。このプラグインは、インストールしただけでは、
意味がなく、機能を使う場合は、必ず有効化する必要があります。
メニューを作成する
デフォルトでは何もメニューが用意されていないので、[here]をクリックしてメニューを作成します。
クリックしたら、メニュー名を入れて「メニューを作成」ボタンを押し、ハンバーガーメニューを作成します。
メニュー表示が被らないように調整
作成したものと、メニューが被らないように、「Elements To Hide On Mobile」の項目を「#header」や「#menu」などテーマに合わせて入力します。これをやると、スマホメニューのみにハンバーガーメニューが表示されます。
関連
