ハンバーガーメニューの作り方 (jQuery編) | Web制作でコーディングを学ぶなら宗谷ブログ

1.

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

この記事ではハンバーガーメニューの作り方について解説します。

今回、作成するハンバーガーメニューは下記の通りです。

下記の流れで作ります。

ヘッダーを作る
ハンバーガーメニューのアイコンを作る
ハンバーガーメニューが開くときのアイコンのアニメーション
ハンバーガーメニューが開くときの背景の表示と画面の固定
ハンバーガーメニューが開くときにメニューを表示させる
ロゴやメニューをクリックしたらハンバーガーメニューを閉じる
PC版の画面幅になったらハンバーガーメニューを閉じる

それでは上から順に制作していきましょう。

2.

ヘッダーを作る

まずはヘッダーを作成します。

下記の CodePen にある HTML と CSS を参考に作成してみてください。

3.

ハンバーガーメニューのアイコンを作る

ヘッダーの作成が完了したら、ハンバーガーメニューのアイコンを作成します。

下記の CodePen にある HTML と CSS を参考に作成してみてください。

4.

ハンバーガーメニューが開くときのアイコンのアニメーション

アイコンの作成が完了したら、アニメーションを作っていきます。

まずは、ハンバーガーメニューのアイコンをクリックしたらアイコンのバーが回転するアニメーションを作っていきます。

下記の CodePen にある HTML と CSS と jQuery を参考に作成してみてください。

行き詰まった方は CodePen の下にある解説を見ながら作成してみてください。

それでは、上記のコードの解説です。

まずは HTML と jQuery を確認していきましょう。 (※コードは前回との差分のみ)

<!-- ハンバーガーメニュー全体 id="hamburger" を追加 -->
<div id="hamburger" class="hamburger">
　<!-- ハンバーガーメニューのアイコン id="hamburger-icon" を追加 -->
　<div id="hamburger-icon" class="hamburger__icon">
  　<div class="hamburger__bar"></div>
    <div class="hamburger__bar"></div>
    <div class="hamburger__bar"></div>
　</div>
</div>

$(function(){
　/* 変数の作成 */
  const hamburger = $('#hamburger');
  const hamburger_icon = $('#hamburger-icon');

　/* クリックしたときの処理 */
  hamburger_icon.on('click', function() {
    hamburger.toggleClass('js-hamburger');
  });
});

まずはハンバーガーメニュー全体とハンバーガーメニューのアイコンを変数にします。

変数を作ったらクリック時のアニメーションを作成します。

今回は hamburger_icon をクリックしたら hamburger に js-hamburger クラスを追加します。

追加するクラスの CSS は下記の通りです。

/* アイコンの全体とアイコンのバーを相対、絶対の関係に */
.js-hamburger .hamburger__icon {
	position: relative;
	z-index: 12;
}

.js-hamburger .hamburger__icon .hamburger__bar {
	position: absolute;
}

/* アイコンのバーのアニメーション */
.js-hamburger .hamburger__icon .hamburger__bar:nth-child(1) {
	left: 0;
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.js-hamburger .hamburger__icon .hamburger__bar:nth-child(2) {
	opacity: 0;
}

.js-hamburger .hamburger__icon .hamburger__bar:nth-child(3) {
	bottom: calc(50% - 2px);
	left: 0;
	transform: rotate(-45deg);
}

アイコンの全体とアイコンのバーを相対、絶対の関係にしてアイコンのバーの位置を指定します。

アイコンのバーの1つ目と3つ目を回転させて、2つ目を透明にして見えなくします。

回転させるときは transform: rotate(); を使い、透明にして見えなくするときは opacity: 0; を使います。

5.

ハンバーガーメニューが開くときの背景の表示と画面の固定

ハンバーガーメニューのアイコンをクリックしたときに背景を表示するアニメーションを作っていきます。

また、ハンバーガーメニューが開いた時にページがスクロールしないように画面を固定します。

下記の CodePen にある HTML と CSS と jQuery を参考に作成してみてください。

行き詰まった方は CodePen の下にある解説を見ながら作成してみてください。

それでは、上記のコードの解説です。

まずは HTML と jQuery を確認していきましょう。 (※コードは前回との差分のみ)

<!-- ハンバーガーメニューの背景 id="hamburger-background" を追加 -->
<div id="hamburger-background" class="hamburger__background"></div>

$(function(){
  /* 変数の作成 */
  const bodyElement = $("body");
  const hamburger_background = $('#hamburger-background');

  /* クリックしたときの処理 */
  hamburger_icon.on('click', function() {
    /* 背景をフェードインで表示 */
    hamburger_background.fadeToggle(300);
    /* 画面を固定 */
    bodyElement.toggleClass('js-background-fixed');
  });
});

ハンバーガーメニューの背景で使用するところを変数にします。

また、背景を表示した際にページを固定するため body タグ部分の変数も作成します。

変数を作ったらクリック時のアニメーションを作成します。

今回は hamburger_icon をクリックしたら hamburger_background を0.3秒でフェードインするアニメーションを追加します。

bodyElement に対しては js-background-fixed クラスを追加します。

追加するクラスの CSS は下記の通りです。

/* ハンバーガーメニューを開いた時の背景 */
.hamburger__background {
	display: none;
	position: fixed;
	z-index: 11;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #5CC0EF;
}

/* ハンバーガーメニューを開いた時に背景を固定する */
.js-background-fixed {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

hamburger__background を使って背景部分を作ります。

しかし、背景を表示させるのはアイコンがクリックされたときなので display: none; を忘れないようにしてください。

js-background-fixed には背景を表示した際にページを固定する指定がされています。

6.

ハンバーガーメニューが開くときにメニューを表示させる

ハンバーガーメニューのアイコンをクリックしたときにメニューを表示するアニメーションを作っていきます。

下記の CodePen にある HTML と CSS と jQuery を参考に作成してみてください。

行き詰まった方は CodePen の下にある解説を見ながら作成してみてください。

それでは、上記のコードの解説です。

まずは HTML と jQuery を確認していきましょう。 (※コードは前回との差分のみ)

<!-- ハンバーガーメニューのメニュー id="hamburger-nav" を追加 -->
<div id="hamburger-nav" class="header__nav">
　<ul class="header__menus">
　　<li class="header__menu">
　　　<a href="#">メニュー</a>
　　</li>
　　<li class="header__menu">
　　　<a href="#">メニュー</a>
　　</li>
　　<li class="header__menu">
　　　<a href="#">メニュー</a>
　　</li>
　　<li class="header__menu">
　　　<a href="#">メニュー</a>
　　</li>
　</ul>
</div>

$(function(){
  /* 変数の作成 */
  const hamburger_nav = $('#hamburger-nav');

  /* クリックしたときの処理 */
  hamburger_icon.on('click', function() {
    hamburger_nav.toggleClass('js-hamburger-nav');
  });
});

ハンバーガーメニューで使用するメニューを変数にします。

変数を作ったらクリック時のアニメーションを作成します。

今回は hamburger_icon をクリックしたら hamburger_nav に対して js-hamburger-nav クラスを追加します。

追加するクラスの CSS は下記の通りです。

.js-hamburger-nav {
    display: block;
 }

.js-hamburger-nav .header__menus {
	position: fixed;
	z-index: 12;
	top: 100px;
	left: 0;
	width: 100%;
	height: calc(100% - 100px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.js-hamburger-nav .header__menu a {
	height: auto;
}

.js-hamburger-nav .header__menu {
  width: 100%;
  height: auto;
}

PCの時にヘッダーのメニューで使っていたクラスを、js-hamburger-nav というクラスで上書きする形でハンバーガーメニュー用にスタイルを変更します。

7.

ロゴやメニューをクリックしたらハンバーガーメニューを閉じる

ハンバーガーメニューを表示するアニメーションは一通り完了したため、ここからはハンバーガーメニューを閉じる処理について解説していきます。

下記の CodePen にある HTML と CSS と jQuery を参考に作成してみてください。

行き詰まった方は CodePen の下にある解説を見ながら作成してみてください。

それでは、上記のコードの解説です。

今回は新たに CSS を追加していないので HTML と jQuery だけ確認していきましょう。(※コードは前回との差分のみ)

<!-- id="hamburger-logo" を追加 -->
<h1 id="hamburger-logo" class="header__logo">
　<a href="#">ここにロゴ</a>
</h1>

$(function(){
  /* 変数の作成 */
  const hamburger_logo = $('#hamburger-logo');
  const hamburger_menu = $('#hamburger-nav a');

  /* ロゴをクリックした時の処理 */
  hamburger_logo.on('click', function() {
    hamburger.removeClass('js-hamburger');
    hamburger_nav.removeClass('js-hamburger-nav');
    hamburger_background.fadeOut(300);
    bodyElement.removeClass('js-background-fixed');
  });

  /* メニューをクリックした時の処理 */
  hamburger_menu.on('click', function() {
    hamburger.removeClass('js-hamburger');
    hamburger_nav.removeClass('js-hamburger-nav');
    hamburger_background.fadeOut(300);
    bodyElement.removeClass('js-background-fixed');
  });
});

ハンバーガーメニューのロゴとメニューの変数を作成します。

変数の作成が完了したらハンバーガーメニューを閉じる処理を書きます。

今回はロゴ (hamburger_logo) かメニュー (hamburger_menu) がクリックされたらハンバーガーメニューを閉じるように処理を追加しました。

8.

PC版の画面幅になったらハンバーガーメニューを閉じる

PC版の画面幅になった時にハンバーガーメニューを閉じる処理を書きます。

下記の CodePen にある HTML と CSS と jQuery を参考に作成してみてください。

行き詰まった方は CodePen の下にある解説を見ながら作成してみてください。

上記のコードの解説です。

今回は HTML と CSS を追加していないので jQuery だけ確認していきましょう。 (※コードは前回との差分のみ)

$(function(){
  /* 画面幅がリサイズされたら処理を実行 */
  $(window).resize(function() {
    /* 現在の画面幅を取得 */
    var windowWidth = $(window).width();

    /* ハンバーガーメニューを閉じたい横幅を変数に格納 */
    const responsive_width = 768;
    
    /* windowWidth (現在の画面幅) が responsive_width (768px) 以上だったら処理を実行  */
    if (windowWidth >= responsive_width) {
      hamburger.removeClass('js-hamburger');
      hamburger_nav.removeClass('js-hamburger-nav');
      hamburger_background.fadeOut(300);
      bodyElement.removeClass('js-background-fixed');
    }
  });
});

画面幅がリサイズされた時に処理が実行されるようにします。

比較する時は現在の画面幅とレスポンシブを比較するのでそれぞれの変数を作成します。

if文で比較し、現在の画面幅がハンバーガーメニューを閉じたい横幅 (今回だと768px) 以上だったらハンバーガーメニューを閉じる処理を実行します。

これでハンバーガーメニューの作成が全て完了しました。

9.

今回のまとめ

この記事ではハンバーガーメニューの作り方について解説しました。

ほとんどのWEBサイトでハンバーガーメニューを使っているので、この記事でハンバーガーメニューを作れるようになると嬉しいです。

最後までお読みいただきありがとうございます。