ハンバーガーメニューとは？デザイン例とスマホだけに表示する方法

スマホで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」などテーマに合わせて入力します。これをやると、スマホメニューのみにハンバーガーメニューが表示されます。