JavaScriptのみで作るハンバーガーメニュー【jQueryなし】

JavaScript
2023.11.13
記事内に商品プロモーションを含む場合があります。

jQueryを使わずにJavaScriptだけでハンバーガーメニューを作りたい。

制作会社やクライアントの意向などで、jQueryが使えないことがあると思います。

中には｢jQueryを卒業して生のJavaScript（Vanilla JS）を勉強したい｣という方もいるでしょう。

そのような方に向けて、今回はJavaScriptのみでハンバーガーメニューを作る方法について解説します。

スポンサーリンク

JavaScriptのみ作るハンバーガーメニュー【全体像】

今回は、下記ハンバーガーメニューを使って解説します。

右上のハンバーガーボタンをクリックすると、右からメニューがスライド表示されるのがわかると思います。

コピペしたい方は、下記コードをご利用ください。

HTML

<header class="header">
  <div class="header__container">
    <h1 class="header__logo"><a href="/">logo</a></h1>
    <button type="button" class="hamburger">
      <span></span>
    </button>
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="/">home</a></li>
        <li class="nav__item"><a href="#">事業内容</a></li>
        <li class="nav__item"><a href="#">会社概要</a></li>
        <li class="nav__item"><a href="#">採用情報</a></li>
        <li class="nav__item"><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

@charset "utf-8";
/* ===============================================
ヘッダーのスタイリング
=============================================== */
.header {
  height: 80px;
  background-color: #0f5474;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.header__container {
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: inherit;
  color: #fff;
  padding: 0 25px;
  margin-right: auto;
  margin-left: auto;
}
.header__logo a {
  text-decoration: none;
  font-size: 30px;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
}

/* ===============================================
ハンバーガーボタンのスタイリング
=============================================== */
.hamburger {
  width: 50px;
  height: 80px;
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: #0f5474;
  cursor: pointer;
}
.hamburger span,
.hamburger span::after,
.hamburger span::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: all 0.5s;
}
.hamburger span::before {
  top: -10px;
}
.hamburger span::after {
  bottom: -10px;
}
.hamburger.open span {
  background-color: transparent;
}
.hamburger.open span::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburger.open span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* ===============================================
メニューのスタイリング
=============================================== */
.nav {
  position: fixed;
  width: 80%;
  height: 100vh;
  top: 80px;
  right: -100%;
  background-color: #0f5474;
  padding: 50px 0;
  transition: all 0.5s;
  border-top: 1px solid #fff;
}
.nav__item a {
  display: block;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  padding: 20px 0 20px 50px;
  text-transform: uppercase;
}
.nav__item a:hover {
  color: #0f5474;
  background-color: #fff;
}
.nav.open {
  right: 0;
}

JavaScript

"use strict";
{
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav');

  hamburger.addEventListener('click', function() {
    hamburger.classList.toggle('open');
    nav.classList.toggle('open');
  });
}

ここから、詳しく解説します。

スポンサーリンク

JavaScriptのみでハンバーガーメニューを作る方法【パーツごとに解説】

全体像を見てもピンと来ない方もいると思うので、パーツごとに分けて解説していきます。

ヘッダーとハンバーガーボタン

まず、ヘッダーとハンバーガーボタンを作っていきましょう。

HTML&CSS

HTMLはこちらになります。

<header class="header">
  <div class="header__container">
    <h1 class="header__logo"><a href="/">logo</a></h1>
    <button type="button" class="hamburger">
      <span></span>
    </button>
  </div>
</header>

ハンバーガーボタンはbutton要素で作成します。

button要素で作るとスクリーンリーダーで｢ボタン｣と読み上げてくれるので、アクセシビリティ的におすすめです。

なお、buttonのtype属性はbuttonとします（何も指定しないとsubmit（送信）になるので注意）。

button要素の中にspanタグを1つだけ配置しました。これはハンバーガーボタンの線を表現するためで、spanタグと2つの疑似要素（beforeとafter）で合わせて3本の線をCSSで作ります。

ヘッダーロゴ（h1）とハンバーガーボタン（button）は、横並びにするためheader__containerクラスで囲みました。

CSSはこちらです。

/* ===============================================
ヘッダーのスタイリング
=============================================== */
.header {
  height: 80px;
  background-color: #0f5474;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.header__container {
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: inherit;
  color: #fff;
  padding: 0 25px;
  margin-right: auto;
  margin-left: auto;
}
.header__logo a {
  text-decoration: none;
  font-size: 30px;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
}

/* ===============================================
ハンバーガーボタンのスタイリング
=============================================== */
.hamburger {
  width: 50px;
  height: 80px;
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: #0f5474;
  cursor: pointer;
}
.hamburger span,
.hamburger span::after,
.hamburger span::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: all 0.5s;
}
.hamburger span::before {
  top: -10px;
}
.hamburger span::after {
  bottom: -10px;
}

ヘッダーとハンバーガーボタンのスタイリングが整いました。

JavaScript

続いて、JavaScriptを使って、ハンバーガーボタンのアニメーションを実装しましょう。

まずは、トリガーとなる｢ハンバーガーボタンをクリックしたとき｣という処理を書いていきます。

イベントのターゲットであるハンバーガーボタン（クラス名＝hamburger）はquerySelectorで取得します。クラスなので｢.（ドット）｣を付ける点に注意してください。

イベントの登録にはaddEventListenerメソッドを使い、イベントタイプをclickとします。

document.querySelector（クラス名）
：クラス名と一致する要素を取得する
ターゲット.addEventListener('click', 関数);
：ターゲットをクリックしたときに関数を実行する

なお、冒頭で"use strict"を宣言していますが、これはStrictモードと呼ばれ、JavaScriptのコードをより厳格にエラーチェックするためのものです。

JavaScriptを書く際には、基本的にStrictモードをONにすることをおすすめします。

JavaScript

"use strict";
{
  const hamburger = document.querySelector('.hamburger');
  hamburger.addEventListener('click', function() {
   //処理内容
  });
}

では、具体的な処理内容を書いてみましょう。

｢ハンバーガーボタンをクリックしたら3本線が×に変わる｣の部分ですね。

まずは、変化後のCSSです。

セレクタを｢.hamburger.open｣とした上で、真ん中の線（span）はtransparentで透明に、疑似要素（before・after）はそれぞれ45度（または-45度）回転しさせて｢×｣を表現します。

これは｢hamburgerクラスにopenクラスが付与されると下記スタイルが適用される｣という意味で、openクラスの付け外しをJavaScriptで制御します。

CSS

/* ===============================================
ハンバーガーボタンのスタイリング
=============================================== */
/*（省略）*/

/*ここから下を追加*
.hamburger.open span {
  background-color: transparent;
}
.hamburger.open span::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburger.open span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

では、JavaScriptでhamburgerクラスにopenクラスを付け外しする処理を書いていきます。

クラスの付け外しはclassListプロパティのtoggleメソッドを使うと便利です。

classList.toggle(クラス名)
：クラスの付け外しをする

JavaScript

"use strict";
{
  const hamburger = document.querySelector('.hamburger');
  hamburger.addEventListener('click', function() {
     hamburger.classList.toggle("open"); //hamburgerにopenクラスを付け外しする
  });
}

ハンバーガーボタンをクリックすると三本線が×に変わり、再度クリックすると元に戻るアニメーションが完成しました。

メニュー

次にメニュー部分の実装に入ります。

HTML&CSS

buttonの下に、メニューを追加します。

HTML

<header class="header">
  <div class="header__container">
    <h1 class="header__logo"><a href="/">logo</a></h1>
    <button type="button" class="hamburger">
      <span></span>
    </button>
    <!-- ここから -->
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="/">home</a></li>
        <li class="nav__item"><a href="#">事業内容</a></li>
        <li class="nav__item"><a href="#">会社概要</a></li>
        <li class="nav__item"><a href="#">採用情報</a></li>
        <li class="nav__item"><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
    <!-- ここまで追加 -->
  </div>
</header>

メニューはnavタグで全体を囲い、クラス名をnavとしました。

典型的なメニューの作り方なので、問題ないかと思います。

続いて、メニューのスタイリングです。

CSS

/* ===============================================
メニューのスタイリング
=============================================== */
.nav {
  position: fixed;
  width: 80%;
  height: 100vh;
  top: 80px;
  right: -100%;
  background-color: #0f5474;
  padding: 50px 0;
  transition: all 0.5s;
  border-top: 1px solid #fff;
}
.nav__item a {
  display: block;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  padding: 20px 0 20px 50px;
  text-transform: uppercase;
}
.nav__item a:hover {
  color: #0f5474;
  background-color: #fff;
}

メニュー全体（nav）は幅80%・縦100vhとしました。案件によってサイズは変わるので、その辺はデザインと合わせてください。

ポイントは、rightを-100%にして｢隠して｣いる点で、JavaScriptを使って画面内に戻します。

JavaScript

画面右に隠しているメニューを表示させるJavaScriptを書いていきましょう。

どうするかというと、CSSでrightの値を0にすれば良さそうです。

ハンバーガーボタンのスタイリング同様、セレクタを｢.nav.open｣とした上で、下記CSSを追加します。

CSS

/* ===============================================
メニューのスタイリング
=============================================== */
/*（省略）*/

/*下記を追加*/
.nav.open {
  right: 0;
}

あとはJavaScriptで｢ハンバーガーボタンをクリックしたらnavクラスにopenクラスを付け外しする｣と書けばOKです。

navクラスを持つ要素の取得はquerySelectorで、クラスの付け外しはclassList.toggleでしたね。

JavaScript

"use strict";
{
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav'); //navクラスの要素を取得

  hamburger.addEventListener('click', function() {
    hamburger.classList.toggle('open');
    nav.classList.toggle('open'); //openクラスを付け外しする
  });
}

以上で、ハンバーガーメニューが完成しました。

スポンサーリンク

まとめ

今回は、JavaScriptのみで作るハンバーガーメニューをご紹介しました。

これまでJavaScriptにあまり触れたことがなくても、｢あれ？意外と簡単かも？｣と感じた方もいるかもしれませんね。

jQueryとあまり変わらない記述量で実装できますので、生のJavaScriptに親しんでみてはいかがでしょうか。