HTML/CSS JavaScript

ハンバーガーメニューをHTML+CSS+jsで作る方法【初心者向け】

「ハンバーガーメニューってなに？」
「ヘッダーメニューをレスポンシブ対応させたい」

この記事はそんな方へ向けて書いています。

こんにちは。

エンジニア転職を目指してプログラミング学習をしている、うっちゃんです。

サイト制作を学んでいる中で、ハンバーガーメニューの作り方に悩んでいませんか？

実は初心者でもかんたんに作れるのです。

この記事ではハンバーガーメニューをHTML+CSS+jsで作る方法を紹介します。

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

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

ハンバーガーメニューとは上図のようにサイト内の三本線で表されたナビゲーションメニューです。

主にスマートフォン向けのレスポンシブデザインで使われます。

三本線を押すと隠れていたメニューが表示されます。

ハンバーガーメニューを使うと3つのメリットがあります。

メリット1：メニューと分かりやすい

三本線を押せばメニューが表示されるので、ユーザーが直感的に分かりやすいです。

メリット2：ヘッダーにスペースができる

スペースを取らないため、いろんな見せ方、デザインが可能になります。

ファーストビューで伝えたいメッセージや画像を大きく表示できるため、ユーザーの興味・関心を引きやすいです。

メリット3：デザインの邪魔をしない

三本線だけで表されるので、シンプルな見た目です。

どんなデザインにも馴染むので、Webデザインの邪魔になりません。

ハンバーガーメニューの作り方

ハンバーガーメニューの作り方

今回は初心者向けにシンプルなハンバーガーメニューを作ります。

上図のようにPC向けサイトではPCメニュー、スマホ向けサイトではハンバーガーメニューが表示されるようにします。

コーディングはHTML+CSS+jsで行います。

サイト設計でみた仕組み

HTMLはハンバーガーメニュー、押してから表示されるメニュー、閉じるボタン、PCメニューを作ります。

CSSは見た目を整え、ハンバーガーメニューの表示・非表示を切り替えます。

jsはクリックされた時にCSSを操作するように書いていきます。

HTMLのコーディング

まずはPC版のメニューを作成します。

<header>
    <h1>内田裕之のポートフォリオ</h1>

    <!-- PC版メニュー -->
    <div class="pc-menu">
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">あいさつ</a></li>
          <li><a href="#">問い合わせ</a></li>
        </ul>
      </nav>
    </div>
    
  </header>
サイトロゴとヘッダーメニュー

サイトロゴとヘッダーメニューを横並びにするのはCSSで行います。

詳細な解説記事はこちら

次にハンバーガーメニューのボタンを作りましょう。

ボタンの画像はGoogle Fontsのアイコン集から取ってきます。

Google Fontsの使い方

Google Fontsを使うためにはheadにlinkを書く必要があります。

まずGoogle検索で「material icon guide」と検索します。

googlefontsiconの画像

（参考：Material Icons Guide）

目次の「Icon font for the web」をクリックします。

googlefontsiconの画像

Setup Method 1. Using via Google FontsのlinkをコピーしてHTMLのheadに貼り付けます。

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
</head>

次にアイコンの素材を取得します。

Google検索に戻り「google icon」と検索します。

google fonts icons

（参考：Google Fontsのアイコン集）

画面上部の検索窓で「menu」と検索します。

三本線のハンバーガーメニューが出てくるのでクリックします。

google fonts icons

画面右側にInserting the iconの欄があり、コードが書いてあるのでコピーします。

これをHTMLに貼り付けます。

<header>
    <h1>内田裕之のポートフォリオ</h1>

    <!-- ハンバーガーメニューのアイコン -->
    <div class="sp-menu">
      <span class="material-icons id="open">menu</span>
    </div>

    <!-- PC版メニュー -->
    <div class="pc-menu">
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">あいさつ</a></li>
          <li><a href="#">問い合わせ</a></li>
        </ul>
      </nav>
    </div>
    
  </header>
ハンバーガーメニューが入った画像

class属性を"material-symbols-outlined"から"material-icons"に書き換えるのがポイントです。

最初から"material-icons"にしてよGoogleさんと思いますが、あしからず。

ハンバーガーメニューを開いた画面の項目

次にハンバーガーメニューを押して、メニュー画面を開いた状態をコーディングします。

要素の下に以下のコードを足します。

 <!-- ハンバーガーメニューの内容 -->
  <div class="overlay">
    <span class="material-icons" id="close">close</span>
    <nav>
      <ul>
        <li><a href="index.html">トップ</a></li>
        <li><a href="greeting.html">あいさつ</a></li>
        <li><a href="https://forms.gle/2QTj2FHHoqkw2gF68">問い合わせ</a></li>
      </ul>
    </nav>
  </div>
ハンバーガーメニューの内容

閉じるボタンはGoogle Fontsから取得しました。

メニューの内容はPCメニューと揃えています。

jsを使う設定

最後に</body>の前にjsを使うために以下のコードを書きます。

<script src="js/main.js"></script>

jsの内容は後半で書いていきます。

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

CSSのコーディング

まずPCメニューからCSSで見た目を整えます。

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1300px;
  padding: 0 4%;
 }

nav ul {
  list-style-type: none;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
  color: #000;
  padding: 0 24px;
  line-height: 64px;
  display: block;
}
nav a:hover {
  opacity: 0.6;
}
pcメニューの調整

サイトロゴとメニュー、ハンバーガーメニューを横並びにして見た目を整えました。

コードの解説はこちらの記事をご覧ください。

スマホ画面の調整

スマホ画面ではPCメニューは非表示にし、ハンバーガーメニューを表示するようにします。

非表示にはdisplay: none;を使います。

また、画面サイズの指定は@mediaを使います。

/* PC版メニュー */
.pc-menu {
  display: none;
}
/* レスポンシブ対応 */
@media (min-width: 800px) {
  .pc-menu {
    display: flex;
    list-style: none;
  }
  .pc-menu ul {
    list-style-type: none;
  }
  .pc-menu li {
    display: inline-block;
  }
  .pc-menu a {
    text-decoration: none;
    color: #000;
    padding: 0 24px;
    line-height: 64px;
    display: block;
  }
  .pc-menu a:hover {
    opacity: 0.6;
  }
  /* ハンバーガーメニュー */
  .sp-menu {
    display: none;
  } 
}
PCメニュー
pc画面

PC画面ではハンバーガーメニューが非表示になりました。

スマホ画面
スマホ画面

スマホ画面ではPCメニューが非表示になり、ハンバーガーメニューが表示されました。

次にハンバーガーメニューの見た目を整えます。

ハンバーガーメニューの装飾

ボタンが小さすぎるのと、三本線だけでは分かりにくいので囲い線をつけます。

.sp-menu #open {
  font-size: 32px;
  padding: 16px 16px;
  border: solid silver 0.5px;
  border-radius: 5px;
}
ハンバーガーメニューの装飾

ハンバーガーメニューはfont-sizeで大きくしました。

paddingで余白を作り、borderで囲い線を作っています。

さらにborder-radiusで囲い線の角を丸めました。

ハンバーガーメニューを開いたら三本線のアイコンは非表示にしたいのでCSSを追加します。

.sp-menu #open.hide {
  display: none;
}

#openに.hideが追加されたらdisplay: none;で非表示にする設定です。

詳細はjsのコーティングで解説します。

次にハンバーガーメニューを開いたときのメニュー画面を作りましょう。

ハンバーガーメニューを開いた画面の装飾

クラス属性overlayをCSSで整えます。

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(254, 180, 83, 0.95);
}
overlayの画面

position: fixedでメニュー画面が前面に表示されるようにしています。

top、bottom、right、leftを0にすることで画面いっぱいに広げました。

背景は透明度のあるオレンジ色です。

ただ、メニューの項目がしょぼく見えるので見た目を整えます。

.overlay ul {
  list-style-type: none;
  text-align: center;
}
.overlay li {
  margin-top: 24px;
}
.overlay a {
  padding: 0 24px;
  line-height: 64px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
}
.overlay a:hover {
  opacity: 0.6;
}
overlayメニュー

メニューの装飾をなくし、左右中央ぞろえで並べました。

文字サイズも大きくしました。

次にCloseボタンの位置と見た目を整えます。

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(254, 180, 83, 0.95);
  padding: 64px;
}
.overlay #close {
  position:absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  cursor: pointer;
}
closeボタンの位置調整

Closeボタンを右上に持っていき、大きくしました。

position: absolute;で絶対座標を変更できるようにして、top、rightで場所を指定します。

これでハンバーガーメニューを開いたときの画面ができました。

しかし、このままではメニュー画面が最前面に表示されたままになるので、さらにCSSを書き加えます。

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(254, 180, 83, 0.95);
  padding: 64px;
  opacity: 0;
  pointer-events: none;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}
ovarlayを閉じた画面

メニュー画面が消えましたね。

opacity: 0;でメニュー画面を透明にしました。

ただ、透明にしただけだとメニューの要素が動作してしまいます。

そこでpointer-events: none;によってクリックも選択もできないようにしました。

.overlay.showは、CSSクラス（.overlay）に.showが追加されたときに表示されるように設定するものです。

opacity: 1;により再表示するようにしています。

また、 pointer-events: auto;によりクリックや選択が再びできるようにしています。

これでCSSは完了です。

最後にjsでメニューの開閉をできるようにします。

jsのコーディング

ハンバーガーメニューを押すとメニュー画面が表示されるようにします。

  const open = document.getElementById('open');

  const overlay = document.querySelector('.overlay');
  
  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });
overlayを閉じた画面
overlayを開いた画面

constは定数を宣言します。

document.getElementById('open');でid=openの要素を指定します。

document.querySelector('.overlay');はclass=overlayの要素を指定します。

open.addEventListener('click', () => {動作内容});でid=openに特定のイベントがあったときに関数が呼び出されます。

特定のイベントとはクリックclickです。

動作内容は2つを指定しています。

1つはCSSクラスoverlayに.showを付け足すこと。

.overlay.showは再表示する設定にしているため、メニュー画面が出てきます。

もう１つは#openに.hideを付け足すこと。

CSSでdisplay: none;を設定しているので、ハンバーガーメニューは非表示になります。

これでハンバーガーメニューを押すとメニュー画面が表示される設定ができました。

メニュー画面を閉じる設定

Closeボタンを押したらメニュー画面を閉じるようにします。

  const close = document.getElementById('close');

  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    open.classList.remove('hide');
  });
overlayを開いた画面
overlayを閉じた画面

メニュー画面が閉じるようになりました。

ここでは2つの設定をしています。

1つは.overlay.showから.showを取り除くこと。

.overlayはCSSで非表示にしています。

もう1つは#open.hideから.hideを取り除くこと。

#openはハンバーガーメニューを表示します。

これでメニュー画面が閉じるようになりました。

完成したコード

コピペで使えるようにHTML、CSS、jsのコードをまとめます。

<!DOCTYPE html>
<html lang="ja">
<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>Hamburger Menu</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>内田裕之のポートフォリオ</h1>

    <!-- ハンバーガーメニューのアイコン -->
    <div class="sp-menu">
      <span class="material-icons" id="open">menu</span>
    </div>

    <!-- PC版メニュー -->
    <div class="pc-menu">
      <nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li><a href="#">あいさつ</a></li>
          <li><a href="#">問い合わせ</a></li>
        </ul>
      </nav>
    </div>
    
  </header>
  <!-- ハンバーガーメニューの内容 -->
  <div class="overlay">
    <span class="material-icons" id="close">close</span>
    <nav>
      <ul>
        <li><a href="index.html">トップ</a></li>
        <li><a href="greeting.html">あいさつ</a></li>
        <li><a href="https://forms.gle/2QTj2FHHoqkw2gF68">問い合わせ</a></li>
      </ul>
    </nav>
  </div>

    
  <script src="js/main.js"></script>
</body>
</html>
@charset "UTF-8";

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1300px;
  padding: 0 4%;
 }

/* ハンバーガーメニュー部分 */
.sp-menu #open {
  font-size: 32px;
  padding: 16px 16px;
  border: solid silver 0.5px;
  border-radius: 5px;
  cursor: pointer;
}
.sp-menu #open.hide {
  display: none;
} 
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(254, 180, 83, 0.95);
  padding: 64px;
  opacity: 0;
  pointer-events: none;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.overlay #close {
  position:absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  cursor: pointer;
}
.overlay ul {
  list-style-type: none;
  text-align: center;
}
.overlay li {
  margin-top: 24px;
}
.overlay a {
  padding: 0 24px;
  line-height: 64px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
}
.overlay a:hover {
  opacity: 0.6;
}


/* PC版メニュー */
.pc-menu {
  display: none;
}
@media (min-width: 800px) {
  .pc-menu {
    display: flex;
    list-style: none;
  }
  .pc-menu ul {
    list-style-type: none;
  }
  .pc-menu li {
    display: inline-block;
  }
  .pc-menu a {
    text-decoration: none;
    color: #000;
    padding: 0 24px;
    line-height: 64px;
    display: block;
  }
  .pc-menu a:hover {
    opacity: 0.6;
  }
  .sp-menu {
    display: none;
  } 
}
'use strict';

{
  
  const open = document.getElementById('open');
  
  const overlay = document.querySelector('.overlay');
  
  const close = document.getElementById('close');

  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });

  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    open.classList.remove('hide');
  });
}

まとめ

今回はハンバーガーメニューをHTML+CSS+jsで作る方法を紹介しました。

  • HTMLでアイコンやメニュー項目を作る
  • CSSで見た目を整える
  • jsでクリックで表示画面を切り替える

今回の記事がレスポンシブ対応に役立つと嬉しいです。

サイトができあがったらGitHub Pagesを使って無料でネット上に公開しましょう。

この記事がよかったらTwitterやブログで紹介いただけると嬉しいです。

-HTML/CSS, JavaScript
-, ,