ハンバーガーメニュー（ドロワーメニュー）の作り方

Webデザインにおいて、横棒の線が縦に3つ並んだメニューボタンのことを、ハンバーガーに見立ててハンバーガーメニューと呼んでいます。

ハンバーガーメニューは多くのサイトで使われていて、特にスマホのように画面が小さく、表示できる情報が限られる場合に有効で、ナビゲーションなどを見えないようにしておき、ハンバーガメニューなどのボタンをクリックすると表示されるように実装されているケースが多いです。

そんなハンバーガーメニューの実装方法を紹介します。

今回作り方を紹介するのは、下のデモのように、ハンバーガーメニューをクリックすると左からメニューがスライド表示されるもの。

このようなメニューをドロワーメニューと呼んだりします。

See the Pen
hamburger by KUBO (@KUBOGEN)
on CodePen.

ハンバーガメニューの仕組みと実装手順

まず、ハンバーガーメニューの仕組みについてですが、はじめは左の見えない位置にある状態のナビゲーションが、ハンバーガーメニューのアイコンがクリックされると元あった見える位置に表示されます。

表示までに少し時間をかけてやることで、左からスライドするかのように見せることができます。

実装手順としては、以下のような感じ。

ハンバーガーメニューのボタンをつくる
ボタンをクリックすると、activeクラス（クラス名は任意）を付与
activeクラスが付いているときは三本線ではなく×印にする
ナビゲーションを左側に隠す
ボタンをクリックすると、ナビゲーションにopenクラス（クラス名は任意）を付与
openクラスが付いているときは見える位置に表示する

ハンバーガーメニューのボタンをつくる

HTML
<div class=”hamburger”>
　<span></span>
　<span></span>
　<span></span>
</div>

CSS
.hamburger {
　width: 30px;
　height: 30px;
　background: #000;
　padding: 10px;
　display: flex;
　justify-content: center;
　align-items: center;
　position: absolute;
　z-index: 999;
}
.hamburger:hover {
　cursor: pointer;
}
.hamburger span {
　background: #fff;
　width: 25px;
　height: 2px;
　position: absolute;
　transition: 0.3s ease-out;
}
.hamburger span:nth-of-type(1) {
　top: 15px;
}
.hamburger span:nth-of-type(3) {
　bottom: 15px;
}

ハンバーガーメニューは3つのspan要素で作っており、1本目と3本目の位置を上下に少しずらすことで三本線を作っています。

なお、transitionプロパティは、×から三本線に戻る際に動きをなめらかにするために指定しています。

その他、ハンバーガーメニューの大きさや位置、余白などの調整をしていますが、それぞれの説明は省略します。

transitionでトランジション関連のプロパティをまとめて指定【CSS】

ボタンをクリックすると、activeクラス（クラス名は任意）を付与

ハンバーガーメニューのボタンができたら、そのボタンをクリックするたびに、任意のクラスがついたり外れたりするようなスクリプトを実装する必要があります。

JavaScript
$(function(){
　$(‘.hamburger’).click(function(){
　　$(‘.hamburger’).toggleClass(‘active’);
　});
});

このようにすることで、hamburgerクラスがついた要素をクリックすると、hamburgerクラスの要素にactiveクラスがついたり外れたりします。

activeクラスが付いているときは三本線ではなく×印にする

activeクラスがつけられるようになると、activeクラスがついているときの状態を指定しなければなりません。

CSS
.hamburger.active span:nth-of-type(1) {
　transform: translateY(9px) rotate(-45deg);
　transition: 0.3s ease-out;
}
.hamburger.active span:nth-of-type(3) {
　transform: translateY(-9px) rotate(45deg);
　transition: 0.3s ease-out;
}
.hamburger.active span:nth-of-type(2) {
　opacity: 0;
}

今回は、ボタンをクリックするとアイコンが三本線と×印と入れ替わるようにしたいので、1本目と3本目の線をそれぞれ45度傾け、真ん中の線は見えないようにしています。

こうすることで、hamburgerクラスの要素にacitiveクラスがついていないときは三本線、ついているときは×印になります。

ナビゲーションを左側に隠す

まず最初はナビゲーションを左に隠しておきます。

HTML
<nav class=”menu”>
　　<ul>
　　　<li>メニュー1</li>
　　　<li>メニュー2</li>
　　　<li>メニュー3</li>
　　　<li>メニュー4</li>
　　　<li>メニュー5</li>
　　</ul>
</nav>

CSS
.menu {
　width: 300px;
　background: #000;
　color: #fff;
　position: absolute;
　padding-top: 40px;
　transform: translate(-300px);
　transition: 0.3s ease-out;
}
li {
　margin-bottom: 10px;
}

特に難しいことはしていなくて、transformプロパティで-300pxの位置に指定しているだけです。

transformは平面空間で要素を変形できる【CSS】

ボタンをクリックすると、ナビゲーションにopenクラス（クラス名は任意）を付与

activeクラスのときと同様、ボタンがクリックされると、ナビゲーションにopenクラスがついたり外れたりするようにします。

JavaScript
$(function(){
　$(‘.hamburger’).click(function(){
　　$(‘.hamburger’).toggleClass(‘active’);
　　$(‘.menu’).toggleClass(‘open’);
　});
});

menuクラスのナビゲーションにopenクラスがついたり外れたりする一文を追加しています。

openクラスが付いているときは見える位置に表示する

menuクラスのナビゲーションにopenクラスがついているときは見える位置に表示するようにします。

CSS
.menu.open {
　transform: translate(0);
　transition: 0.3s ease-out;
}

通常時は-300pxの位置にあるナビゲーションをtransformプロパティでtranslate(0)とすることで、元の見える位置に戻ります。

transitionプロパティで元の位置に戻るまでの時間を少しかけてやることで、左からスライドするように見せています。

仮にtransitionプロパティを指定しなければ、表示・非表示が一瞬で切り替わるように見えるので、スライドしているようには見えません。

まとめ

今回は簡単なハンバーガーメニューの実装について紹介しました。

ポイントは、ボタンをクリックすると任意のクラスがハンバーガーメニューやナビゲーションに付与され、そのクラスがついているときとついていないときのスタイルを指定するということです。

また、ナビゲーションの位置を変えれば、右や上からスライドするメニューにすることもできますし、色々と工夫を加えれば様々な動きにすることができます。

関連記事
スマホサイトでよくみられるグローバルメニューの基本パターン