SEO対策なら株式会社ペコプラ > Webサイト制作 > サイト制作 > ハンバーガーメニューとは？作成方法や記述例も紹介

ハンバーガーメニューとは？作成方法や記述例も紹介

Webサイト制作

サイト制作

2021.10.19

ハンバーガーメニューはスマホの普及とともに、見る機会が増えました。

実際に自分でサイト作成する際にも取り入れようと思った時、ハンバーガーメニューのメリットやデメリット、注意点、作成方法などについて理解しておくことが大切です。

今回はハンバーガーメニューについて詳しく紹介していきます。

1 ハンバーガーメニューとは
2 ハンバーガーメニューのメリット・デメリット
- 2.1 メリット
- 2.2 デメリット
  - 2.2.1 押すまでメニュー項目が分からない
  - 2.2.2 目立ちにくいので見つけにくい恐れがある
3 ハンバーガーメニューの作成方法や記述例
- 3.1 HTML
- 3.2 CSS
4 ワードプレスで簡単にハンバーガーメニューを設定する方法
5 ハンバーガーメニューを利用する際の注意点
6 ハンバーガーメニューの例
7 まとめ

ハンバーガーメニューとは

ハンバーガーメニューとは、Webサイトのナビゲーションメニューに使われるデザイン手法のひとつです。

三本線「≡」のアイコンを使ったナビゲーションメニューで、タップ・クリックするとサイドメニューやナビゲーションドロワーが出現するものを指します。

形がハンバーガーに似ていることから、ハンバーガーメニュー・ハンバーガーアイコンと呼ばれています。

3本線で構成するのが一般的ですが、4本線や2本線で構成している場合もあります。

ハンバーガーメニューは通常のメニューに比べてコンパクトなので、画面がPCより小さなスマホでもその存在が煩わしくならないということで、2010年前後のスマートフォンが普及しはじめた頃からこのメニューが使われるサイトが増加しており、多くのスマホ対応サイトで取り入れられるようになりました。

また、最近ではレスポンシブデザインの普及によって、スマホだけでなくPCやタブレットなどで見る機会が増えてきました。

ハンバーガーメニューのメリット・デメリット

ハンバーガーメニューを作成するにあたってのメリットやデメリットについて、詳しく紹介していきます。

メリット

メニューを手軽に設置、変更ができる

ハンバーガーメニューの場合、ヘッダーには3本の線を設置するだけで複数のメニューを手軽に設置する事が可能です。

また、メニューの追加・削除など変更の際に、現在のデザインに大きな影響を与えることなく、手軽に変更することができるので、便利です。

省スペースなのでコンテンツエリアを広くとれる

三本線のみでたくさんのメニューを表示することが可能なので他の項目の表示領域を多く確保することができ、様々な見せ方やデザインが可能になります。

そのため、伝えたい事や見せたい情報を大きく表示する事ができ、結果ターゲットユーザーの興味や関心を引く事に繋がります。

多くのユーザーが感覚的に使用することができるUIである

スマートフォンの普及により、現在の検索デバイスの傾向はPCよりもスマホに移行してきています。

ハンバーガーメニューの操作性に大きな違いがないため、どのサイトでも同じように感覚的に使用することができるという点もメリットと言えるでしょう。

デメリット

押すまでメニュー項目が分からない

ハンバーガーメニューはメニューボタンをクリックしなければ中にどんな項目があるのかが分からないため、トップページなどでサイトコンテンツに興味を持ってもらえないとメニューを開いてもらえない可能性が高いというのは大きなデメリットの1つです。

目立ちにくいので見つけにくい恐れがある

普段からスマホやPCでウェブサイトを閲覧している人であれば、ハンバーガーメニューを押す＝メニューが表示されるということはすぐに理解ができます。

しかし、普段からあまりウェブサイトを閲覧しない人は3本線が何を意味しているのか分からない場合もあります。

ハンバーガーメニューの普及率は高いですが、メニューだと分かりづらいユーザーも一定数います。

ですのでハンバーガーメニューだけに頼るのではなく、下記のように三本線の下に「メニュー」の文字を表示させることで、より多くの人に伝わりやすくなりますよ。

ハンバーガーメニューの作成方法や記述例

ハンバーガーメニューを実際に作成する際の作成方法や記述例について詳しく紹介していきます。

HTML


<!--▼グローバルナビ-->

<div id="a-top"></div>

<div id="global-nav">

<dl id="global-nav-in">

<dt class="btn-gnav"></dt>

<dd class="menu-wrap">

&nbsp;

<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>

CSS


/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/

#global-nav{

border-top: 0;

border-bottom: 0;

}

&nbsp;

#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%;

}

&nbsp;

#global-nav #global-nav-in .menu-wrap{ display:none; }

&nbsp;

#global-nav #global-nav-in #menu{ margin-bottom: 0; }

&nbsp;

#global-nav #global-nav-in #menu,

#global-nav #global-nav-in #menu li{

width: 100%;

border: 0;

}

&nbsp;

#global-nav #menu li.first{ border-left: 0; }

&nbsp;

#global-nav #global-nav-in #menu li{

border-bottom: 1px solid #c43ec7;

background-color: #fff;

white-space: normal;

border-top: #6d116f solid 1px;

}

&nbsp;

#global-nav #global-nav-in #menu li.first{ border-left: 0; }

&nbsp;

#global-nav #global-nav-in #menu ul{

position: static;

width: auto;

padding-left: 10%;

}

&nbsp;

#global-nav #global-nav-in #menu ul li{ width: 100%; }

&nbsp;

#global-nav #global-nav-in #menu ul li:last-child{ border-bottom: 0; }

&nbsp;

/*メニューのデザイン*/

#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; }

&nbsp;

#global-nav #global-nav-in #menu ul li a{ width: auto; }

&nbsp;

#global-nav .btn-gnav{

display:block;

padding: 0.2em;

cursor: pointer;

}

&nbsp;

#main-image .catch-copy{ font-size: 1.4em; }

&nbsp;

/* スマホスタイル調整新規 */

/* 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;

}

}