ZeroPlus Media > Web制作 > HTML/CSS > JavaScriptを使ってハンバーガーメニューを作る方法を解説【サンプルファイル付】

JavaScriptを使ってハンバーガーメニューを作る方法を解説【サンプルファイル付】

HTML/CSS

2022/01/21

2025/01/16

この記事ではHTML, CSS, JavaScriptを使った「ハンバーガーメニュー」の作り方を解説します。SP（モバイル）サイズではハンバーガーメニューを、PCではナビゲーションメニューが表示されるように作れます。

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

サンプルのダウンロード
ハンバーガーメニューをコーディングしてみよう
- 全体のレイアウトを作る
- ヘッダーとフッター、mainタグ内のスタイルを整える
ヘッダーの中身を作る
ハンバーガーメニューを作る
ハンバーガーメニュークリック後の動きを作る
ハンバーガーメニューをクリックしたときの動きをJavaScriptで制御する
ナビゲーションメニューを作る
PCサイズを作る
まとめ

サンプルのダウンロード

まず、以下のリンクからサンプルをダウンロードしましょう。

サンプルファイル

中には2種類のファイルが入っています。

「code」：HTML・CSSファイル・画像ファイルが入っているファイル
「mock」：モックアップ画像

以下のようなサンプルコードが確認できます。

See the Pen JS ハンバーガーメニュー by ZeroPlus (@zeroplus-programming) on CodePen.

ハンバーガーメニューをコーディングしてみよう

コーディングを行う際は、以下の手順で進めます。

全体のレイアウトを作る
ヘッダーとフッター、mainタグ内のスタイルを整える
ヘッダーの中身を作る
ハンバーガーメニューを作る
ハンバーガーメニュークリック後の動きを作る
JavaScriptでハンバーガーメニュークリック時の動きを制御する
ナビゲーションメニューを作る
PCサイズを作る

全体のレイアウトを作る

まずは全体のレイアウトをHTMLで作成していきましょう。containerの中にheader, footer, mainを記述します。

かめるん先生

全体のレイアウトをまず確認することで、ハンバーガーメニューの構造がわかりやすくなります！

ダウンロードしたコードと照らし合わせて確認していきましょう！

<body>
  <div class="container">
    <header class="header">
    </header>
    <main>
      <div class="main">
        メインコンテンツエリア
      </div>
    </main>
    <footer class="footer">
      <div>
        フッターエリア
      </div>
    </footer>
  </div>
</body>

次にCSSで見た目を整えていきましょう。

外部サイト「HTML5 Doctor」を参考にしてreset.cssを適用し、linkタグでreset.cssを適用させます。reset.css とは、ブラウザごとに異なるデフォルトスタイルを統一するために使うスタイルシートです。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Document </title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
</head>

このようにreset.cssはstyle.cssより先に記述します。

ヘッダーとフッター、mainタグ内のスタイルを整える

次に、フッターとmainタグにスタイルをあてていきます。

/* 調整用スタイル */

a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

main {
  background-color: #f1f1f1;
  height: 800px;
  display: flex;
}

.main {
  margin: auto;
}
.footer {
  background-color: #f6f6f6;
  height: 200px;
  display: flex;
}
.footer div {
  margin: auto;
}

aタグは、デフォルトの状態だとアンダーラインが表示されるため、text-decoration: none;を指定して非表示にします。ulタグ、liタグも同様に「・」がデフォルトで文頭に表示されるため、list-style: none;を指定して非表示にします。

続いてヘッダーにスタイルをあてます。

/* ヘッダー */

.header {
  background-color: white;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

スクロールしてもヘッダーを追従させるためposition: fixed;を適用します。またヘッダーは手前に表示させるためz-index: 999;を指定します。

無料でプロのエンジニアに質問し放題の環境を「あなたのお部屋」に作れる

ZeroPlus Gateの詳細を見る

費用が一切かからないサービスです！

ヘッダーの中身を作る

ヘッダーの中身を作ります。

HTML

<header class="header">
      <div class="header__inner">
        <h1 class="header__title header-title">
          <a href="#">
            <img src="images/logo-black.png" alt="ロゴ画像">
          </a>
        </h1>

        <nav class="header__nav nav">
        </nav>

        <button class="header__hamburger hamburger">
        </button>
      </div>
</header>

ここでのポイントは以下のとおりです。

ヘッダーの中の左右の余白を確保するため、header-innerを挿入
h1タグの中にはimgタグでロゴ画像を適用
ロゴ画像をクリックしたらトップに戻れるよう、imgタグをaタグで囲う
ナビゲーションメニュー用にnavタグを記述
ハンバーガーメニューはbuttonタグで作成

このうち、buttonタグでハンバーガーメニューを作る理由はフォーカスを適用させるためです。divタグで作成するとフォーカスは当たりません。

かめるん先生

今回はheader-innerに余白をつけておりますが、header自体に余白を直接つける場合もあったりしますね！

ご自身の好きな方で問題ございません！

CSS

現在、モバイルファーストでの記述が推奨されているため、SP（モバイル）サイズから適用していきます。

.header__inner {
  padding: 0 20px; /*左右の余白確保*/
  display: flex; /*ロゴとハンバーガーメニューを横に並べる*/
  align-items: center;
  justify-content: space-between;
  height: inherit; /*親要素の高さを継承*/
  position: relative;
}

/* ヘッダーのロゴ部分 */
.header__title {
  width: 80px;
}

.header__title img {
  display: block;
  width: 100%;
  height: 100%;
}
/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%); 
  background-color: #fff; /*ハンバーガーメニュークリック時のナビゲーションメニュー背景色*/
  transition: ease .4s; /*ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延*/
}
/* ハンバーガーメニュー */
.header__hamburger {
  width: 48px;
  height: 100%;
}

.hamburger {
  background-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  border-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  z-index: 9999;
}

ここでのポイントは以下のとおりです。

header-innerは、ロゴの左側とハンバーガーメニューの右側にpaddingを指定
ロゴとハンバーガーメニューを横並びにするためflexboxを使用
header__navにtransform: translateX(100%);を指定して、コンテンツよりも右側に移動させておく
hamburgerクラスにデフォルトで当たっているスタイルの一部を打ち消すコードも記述

かめるん先生

こちらもCSSの内容ですが、後でどういった動きになるのかを理解するためにもしっかりと把握しておきましょう！

今回は、transform: translateX(100%);で横に移動させ、それを元に戻すという感じで表示させていますね！

ハンバーガーメニューを作る

いよいよハンバーガーメニューを作ります。

HTML

<button class="header__hamburger hamburger">
    <span></span>
    <span></span>
    <span></span>
</button>

ハンバーガーメニューの三本線を表現するためにspanタグを使用します。

CSS

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: relative;
  transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}

線はwidthとheight、線の色はbackground-colorで表現し、三本線の位置をpositionで微調整します。

かめるん先生

共通部分を.hamburgerに記載し、個別の位置を擬似クラス（nth-child）を使用して表示させていますね！

今回は、nth-childを使用していますが、first-childやlast-childで書く場合もあります！

無料の学習サービス「ZeroPlus Gate」で、コーディングの基礎を固めよう！

ZeroPlus Gateの詳細を見る

回数無制限でエンジニアに質問できる環境を「あなたの部屋」に作れます

ハンバーガーメニュークリック後の動きを作る

ハンバーガーメニューをクリックした後の動きを作ります。

HTMLで構造を記述する

<nav class="header__nav nav" id="js-nav">
  <ul class="nav__items nav-items">
  </ul>
</nav>


<button class="header__hamburger hamburger active" id="js-hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

ハンバーガーメニューをクリックしたらactiveクラスを付与するようにします。activeが付いた状態のレイアウトを、画面で確認しながらスタイルを整えたいので、hamburgerクラスにactiveを併記します。

「ハンバーガーメニューをクリックしたらactiveクラスを付与する」というのをJavaScriptで制御するため、idでjs-hamburgerを付けておきます。

かめるん先生

JavaScriptでクリックしたら、activeというクラス名をつけるという実装を後ほど行います！

以下の説明では、HTML/CSSを使って、activeがついた想定での見た目を書いていきます！

js-〇〇というid名は、JavaScript(jQueryを含む)で制御するという意味です。基本的にjs-〇〇はCSSでスタイルを付けません。

navタグもJavaScriptで動きを制御するため、idを付与します。

CSSでハンバーガーメニューの見た目を整えていく

hamburgerクラスにactiveクラスが付いた状態のスタイルを記述します。

/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}

アクティブクラスがついたら三本線の真ん中はopacityで透明にします。上下の線はtransform: rotate(○○deg);で回転させ「×」になるように調整します。ハンバーガーメニューをクリック後、activeクラスが付いたらtransform: translateX(0);にして、元の位置に戻るように設定します。

activeクラスが付いた状態のスタイルを確認したら、HTMLからactiveクラスを削除しておきましょう。

かめるん先生

こちらJavaScriptでの実装はまだしていないので、「activeをつけた状態」を手動でつけます！

そうすることで、擬似的に見た目が問題ないか見ることができますね！

ハンバーガーメニューをクリックしたときの動きをJavaScriptで制御する

ここからJavaScriptを使ってハンバーガーメニューの動きを制御していきます。main.jsファイルに以下のように記述します。

const ham = document.querySelector('#js-hamburger'); //js-hamburgerの要素を取得し、変数hamに格納
const nav = document.querySelector('#js-nav'); //js-navの要素を取得し、変数navに格納

ham.addEventListener('click', function () { //ハンバーガーメニューをクリックしたら
  console.log('ok!'); // コンソール画面でokというメッセージが出る

});

あらかじめHTMLで付与しておいた要素をdocument.querySelectorで取得し、変数に格納します。

かめるん先生

ハンバーガーメニューをクリックしたら〇〇をしたい。ということをJavaScriptで指示出したいので、

まずは、「これがハンバーガーメニューですよ。」というのをブラウザ側に教えてあげるイメージですね！

次にaddEventListenerを使ってクリックイベントを登録しましょう。今回はハンバーガーメニューをクリックしたらクリックイベントを発動させるようにしたいので、先ほど作成した変数hamを使用します。クリックイベントが発動しているかどうかの確認には、console.logを使います。

コンソール画面で「ok!」のメッセージが表示されればOKです。もし表示されなければ、以下の原因が考えられます。

要素が取得できていない（スペルミスなど）
addEventListenerやfunctionなどの記述ミス
HTML側でidを付けていない（js-〇〇）
HTML側のid名のスペルミス
HTML側のid名とdocument.querySelectorで取得するid名が一致していない

クリックイベントの確認が取れたら、addEventListenerの中を作っていきましょう。このときconsole.logはもう不要なため、削除しておきます。

ham.addEventListener('click', function () { //ハンバーガーメニューをクリックしたら
  ham.classList.toggle('active'); // ハンバーガーメニューにactiveクラスを付け外し
  nav.classList.toggle('active'); // ナビゲーションメニューにactiveクラスを付け外し

});

classListは特定の要素のクラス名を追加・削除・参照できるプロパティです。具体的には以下のようなメソッドを持っています。

add：要素にクラスを追加
remove：要素からクラスを削除
toggle：要素が持っている特定のクラスを切り替え
contains：クラスを持っているか確認

今回はクリックするたびにactiveクラスを付け外ししたいので、classList.toggleを使用しています。この状態でクリックするとハンバーガーメニューの三本線が「×」に代わり、ナビゲーションの白背景（header__nav）が右側から出現します。

かめるん先生

この記述で、activeというクラス名を付けたり、外したりして、見た目を変更しております！

自己流のコーディングでは、泣きを見る
"たった"の30日で正しい知識を身につけよう！

ZeroPlus Gateの詳細を見る

費用の一切かからないサービスです

ナビゲーションメニューを作る

ナビゲーションメニューを作ります。

HTML

<nav class="header__nav nav" id="js-nav">
  <ul class="nav__items nav-items">
    <li class="nav-items__item"><a href="">メニュー</a></li>
    <li class="nav-items__item"><a href="">メニュー</a></li>
    <li class="nav-items__item"><a href="">メニュー</a></li>
    <li class="nav-items__item"><a href="">メニュー</a></li>
  </ul>
</nav>

ナビゲーションメニューはulタグ、liタグで作っていきます。メニューをクリックしたらリンク先に遷移するように、aタグも記述します。

CSS

.nav-items {
  padding-top: 250px;
  padding-bottom: 200px;
}

/* ナビのリンク */
.nav-items__item a {
  color: black;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  margin-bottom: 24px;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

メニュー間にmargin-bottomで余白を設けます。最後のメニューの余白は不要なので、last-childにmargin-bottom: 0;に指定し、余白を打ち消しています。これでSP（モバイル）サイズのコードは完成です。

PCサイズを作る

レスポンシブにするため、PCサイズも仕上げていきましょう。レスポンシブする際に使うメディアクエリは、モバイルファーストかPCファーストかによって書き方が異なります。

モバイルファースト：@media screen and (min-width: ○○px) {　}
PCファースト：@media screen and (max-width: ○○px) {　}

今回は960pxからPCサイズに設定したいので、@media screen and (min-width: 960px) とします。

レスポンシブの書き方はいろいろありますが、ここではSP時のスタイルの直下にPC時のスタイルを記述する形式にします。ブロックごとに分けるメリットは、後でスタイルが変更になった場合でも修正しやすい点です。

/* ヘッダーのロゴ部分 */
.header__title {
  width: 80px;
}
@media screen and (min-width: 960px) {
  .header__title {
    width: 120px;
  }
}

/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #fff;
  transition: ease .4s;
}
@media screen and (min-width: 960px) {
  .header__nav {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: 50%;
  }
}


/*PC時のナビゲーションメニュー、横並びにする*/
@media screen and (min-width: 960px) {
  .nav__items {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }
}

.nav-items {
padding-top: 250px;
padding-bottom: 200px;
}
@media screen and (min-width: 960px) {
.nav-items {
   padding-top: inherit;
   padding-bottom: inherit;
  }
}


/* ナビのリンク */
.nav-items__item a {
  color: black;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  margin-bottom: 24px;
}
@media screen and (min-width: 960px) {
.nav-items__item a {
   margin-bottom: 0;
  }
}

/*ハンバーガーメニュー*/
.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}
@media screen and (min-width: 960px) {
  /*PC時非表示にする*/
  .hamburger {
    display: none;
  }
}

ハンバーガーメニューはPC時非表示にしたいのでdisplay: none;を適用します。ナビゲーションメニューはSP時には縦並びになっていましたが、PC時では横並びに変更したいのでflexboxを適用していきます。

これでPC時のレイアウトも完成です。