【コピペで簡単】JavascriptとCSSでハンバーガーメニューを実装する

スマホでWebサイトを見ることが当たり前になった現在、スマホでのメニュー表示はハンバーガーメニューが主流です。

今回はJavascriptとCSSでつくるハンバーガーメニューについて解説します！

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

「ハンバーガーメニュー」を知らない方のためご説明させていただきます！

ハンバーガーメニューとは、「ボタンを押すことで開閉できるメニュー」のことです。

ちなみになぜハンバーガーメニューという名前かといいますと、メニューということを表している上画像のような横棒3つのアイコンがハンバーガーに見えるからという理由です。

それでは、実装方法を見てみましょう。

コピペで簡単にハンバーガーメニューを実装

以下Codepen内のコードをコピペで簡単に実装できます。

See the Pen hamburger menu by spiqa design (@spiqa_design) on CodePen.

各コードについて解説します！

Javascript

window.onload = function () {
    //  読み込みが完了したら実行したい処理を記述
};

onloadイベントは「HTMLやCSS、画像等の読み込みが終わったら処理を実行する」という記述です。

読み込みが終わっていないと、場合によってはアニメーションが動かない可能性があるので、ハンバーガーメニューのアニメーションはこの中に記述します。

onloadイベントについての解説記事はこちら！

CSS

2020.12.05

【コピペで簡単】JavascriptとCSSでハンバーガーメニューを実装する

スマホでWebサイトを見ることが当たり前になった現在、スマホでのメニュー表示はハンバーガーメニューが主流です。今回はJavascriptとCSSでつくるハンバ…

var nav = document.getElementById('nav-wrapper');
var hamburger = document.getElementById('js-hamburger');
var blackBg = document.getElementById('js-black-bg');

続いてonload内の記述についてです。

ハンバーガーメニューを動かすために、各ハンバーガーメニューの要素を取得して変数に入れておきます。

nav-wrapper→ハンバーガーアイコンを押したらスライド表示されるメニュー
hamburger→ハンバーガーアイコン
black-bg→メニューを開いている時に表示する黒背景

// ハンバーガーアイコンをクリックしたら
hamburger.addEventListener('click', function () {
    nav.classList.toggle('open');
});
// 黒背景をクリックしたら
blackBg.addEventListener('click', function () {
    nav.classList.remove('open');
});

ここが実際にハンバーガーメニューを動かすための処理になります！

ハンバーガーアイコンをクリックされるたびに「#nav-wrapperが指定されている要素に.openクラスを追加したり削除する」という記述をしています。

黒背景はクリックしたら「#nav-wrappeの.openクラスを削除する」という記述になっています。

黒背景とは、メニューを開いている時に後ろに表示される背景のことです。
黒背景を敷くことでメニューが見やすくなり、メニューを開閉する役割も担うことでユーザビリティが向上します。

HTML

<div id="nav-wrapper" class="nav-wrapper">
    <div class="hamburger" id="js-hamburger">
        <span class="hamburger__line hamburger__line--1"></span>
        <span class="hamburger__line hamburger__line--2"></span>
        <span class="hamburger__line hamburger__line--3"></span>
    </div>
    <nav class="sp-nav">
        <ul>
            <li>メニュー1</li>
            <li>メニュー1</li>
            <li>メニュー1</li>
        </ul>
    </nav>
    <div class="black-bg" id="js-black-bg"></div>
</div>

nav-wrapperの中に以下3つを記述しています。

hamburger→ハンバーガーアイコン
sp-nav→上記アイコンを押したらスライド表示されるメニュー
black-bg→メニュー表示中に表示する黒背景

CSS


/* 
hamburger(ハンバーガーアイコン)
=================================== */
.hamburger {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
  height: 40px;
  cursor: pointer;
  z-index: 300;
}

.hamburger__line {
  position: absolute;
  width: 50px;
  height: 3px;
  right: 0;
  background-color: #000;
  transition: all 0.5s;
}

.hamburger__line--1 {
  top: 1px;
}

.hamburger__line--2 {
  top: 18px;
}

.hamburger__line--3 {
  top: 36px;
}

/*ハンバーガーがクリックされたら*/
.open .hamburger__line--1 {
  transform: rotate(-45deg);
  top: 11px;
}

.open .hamburger__line--2 {
  opacity: 0;
}

.open .hamburger__line--3 {
  transform: rotate(45deg);
  top: 11px;
}

/* 
sp-nav(ナビ)
=================================== */
.sp-nav {
  position: fixed;
  right: -100%;
  /*ハンバーガーがクリックされる前はWindow右側に隠す*/
  top: 0;
  width: 70%;
  /* 出てくるスライドメニューの幅 */
  height: 100vh;
  background-color: #fff;
  transition: all 0.5s;
  z-index: 200;
  overflow-y: auto;
  /* メニューが多くなったらスクロールできるように */
}

/*ハンバーガーがクリックされたら右からスライド*/
.open .sp-nav {
  right: 0;
}


/* 
black-bg(ハンバーガーメニュー解除用bg)
=================================== */
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 100;
}

/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
  opacity: 0.3;
  visibility: visible;
}

JavaScriptでは、「クリックされたらクラスを追加・削除」という動作をつけるのみで、実際にハンバーガーメニューが開閉する動きなどはCSSに記述します。

HTMLと同じように、3つに分けて記述しています。

hamburger

ハンバーガーアイコンの位置と形をスタイルで指定しています。
また、クリックされたらハンバーガーアイコンが「×」になるよう記述しています。

sp-nav

ハンバーガーメニューをクリックするまではウィンドウ右側に隠しておき、クリックされたら右側からスライドしてくるよう記述しています。

black-bg

ハンバーガーアイコンをクリックするまでは非表示にしておき、クリックされたらメニュー背景全体を覆うように記述しています。

各項目全て、.openクラスが指定されている時のスタイルを忘れずに記述しましょう。
忘れたらクラスが追加・削除されるだけで動きません！

【応用】上から出てくるハンバーガーメニュー

特によく見かける右から出てくるハンバーガーメニューをサンプルコードとして紹介しましたが、「上から出したい！」とか「下から出したい！」という時もありますよね。

サンプルコードを少し変えることで出てくる方向は簡単に変更可能です！

See the Pen hamburger menu top-down by spiqa design (@spiqa_design) on CodePen.

サンプルコードをカスタマイズして上から出てくるメニューに変えてみました！

変えたのはCSSのみです。

/* 
sp-nav(ナビ)
=================================== */
.sp-nav {
  position: fixed;
  top: -100%; /*ハンバーガーがクリックされる前はWindow上部に隠す*/
  left: 0;
  width: 100%; /* 出てくるスライドメニューの幅 */
  height: 80vh;　/*高さは任意で調整*/
  background-color: #fff;
  transition: all 0.5s;
  z-index: 200;
  overflow-y: auto;
}

/*ハンバーガーがクリックされたら上からスライド*/
.open .sp-nav {
  top: 0;
}

右から表示の時は、right: -100%;で右側に隠していましたが、上から出したいのでtop: -100%;に変更します。

それに伴い、ハンバーガーアイコンがクリックされた時は上からスライドされるように、top: 0;

上から表示されるので幅はwidth: 100%;にして高さも少し調整しています。

これを応用して右でも下でも可能です！