CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）

今回はハンバーガーメニューをHTMLとCSSだけで設置する方法を解説します。

ナビドロワー

サルワカのWordPressテーマ「SANGO」もこの方法によりモバイル用メニューを設置しています。

デモも用意してみました。

デモ

ナビゲーションドロワーと呼ばれることも

ナビゲーションドロワー

ちなみに、このような画面の左から右へとニョキっと表示されるメニューのことは「ナビゲーション・ドロワー」と呼ばれたりします。

ナビゲーション・ドロワーは、Googleのマテリアルデザインでよく使われます。デザインのポイントは、公式ガイドライン（英語）にも載っているので、ぜひチェックしてみてください。

Navigation drawer

今回は「ハンバーガーメニュー」✕「ナビゲーション・ドロワー」なモノを作っていきたいと思います。

1. ハンバーガーメニューのHTML

まずは、HTMLから。ヘッダーまわりはサイトによってまちまちかと思うので、headerとハンバーガーメニューだけを書いています。

HTML 
<header>
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">ここに中身を入れる</div>
  </div>
</header>

inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。

解説

チェックボックスとナビドロワーを連動

全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に、ハンバーガーメニューとナビドロワーの中身を全て詰め込みます。

input

チェックボックスを用意して、ここにチェックが入ったかどうかにより、CSSを切り替えます。

label

inputに対するラベルタグを２つ用意しています。上側のラベル（id="nav-open"）は「」として表示され、タップによりinputにチェックを入れる役割をします。

ラベルは薄いカバーに

下側のラベル（id="nav-close"）はinputにチェックが入ったときにのみ半透明の黒カバーとして表示されます。ここをタップすると、inputのチェックが外れます。

div id=”nav-content”

ここに、ナビゲーションドロワーの中身を入れます。サイト内のリンクなり、検索ボックスなり、自由に入れればOKです。

2. ハンバーガーメニューのCSS

CSS 
/*ヘッダーまわりはサイトに合わせて調整してください*/
header {
  padding:10px;
  background: skyblue;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

各CSSの解説はコメントに載せました。これでをタップすると中身が現れ、薄い黒カバーの部分をタップすると閉じるようになります。

なお、inputへのチェックの有無によるCSSの切り替えは「同じ階層の後ろに並ぶ要素に適用させるセレクタ」である「~」により行っています。詳しくはこちらの記事で解説しています。

CSSのセレクタとは？覚えておきたい25種類と書き方

CSSのセレクタとは？覚えておきたい25種類と書き方

モバイル（スマホ/タブレット）だけで表示させる方法

「PC表示では、ハンバーガーメニューは非表示にしたい」という場合もあるかと思います。

WordPressの場合

WordPressの場合には、モバイル（スマホ・タブレット）とPCで表示を切り替える条件分岐が用意されているので楽ですね。

header.php 
<header>
  <?php if ( wp_is_mobile() ) : ?>
    <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">ここに中身を入れる</div>
    </div>
  <?php endif; ?>
</header>

<?php if( wp_is_mobile() ) : ?>〜<?php endif; ?>にはさまれた「ハンバーガーメニュー＆ナビゲーションドロワー部分」はモバイルでのみ表示されるようになります。

CSSでレスポンシブに調整

ブラウザサイズに応じて非表示にするのも手ですね。

CSS 
~さきほどのCSSなど（略）~

@media screen and (min-width:480px) {
  #nav-open {
    display:none;
  }
}

上のように書くと「ブラウザサイズが480px以上の場合にはが非表示」になります。これで、ナビゲーションドロワーが開けられることもありません。隠しているだけなのであまり美しくはありませんが…。

というわけで、HTMLとCSSだけで作る「ハンバーガーメニュー」＆「ナビゲーションドロワー」の紹介でした。よかったらぜひ試してみてください。

サルワカ