CSS HTML5 JavaScript

2020.12.05

【コピペで簡単】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イベントについての解説記事はこちら!

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%;にして高さも少し調整しています。

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

まとめ

ハンバーガーメニューは難しいと思われがちですが、一度覚えてしまえば簡単です。

使いまわせるようにコードは最低限の記述にしていますので、コピペした後にサイトに合うようにスタイル調整してみてください!

下記記事ではまた違ったアニメーションで表示させるコードを紹介しているので、良かったら見てみてください♪

ハンバーガーメニューの関連記事

関連記事

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

おすすめ記事

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!