jQueryとCSSでハンバーガーメニューを作る方法!

レスポンシブWEBデザインでよく見かけるハンバーガーメニューをjQueryとCSSを用いての作り方を紹介しています。スマホやタブレットで表示されるWEBサイトで用いられることの多いハンバーガーメニューを作れるようになりましょう。

コンテンツ [表示]

  1. 1jQueryとCSSでハンバーガーメニューを作りたい
  2. 1.1ハンバーガーメニューとは
  3. 1.2レスポンシブ対応の重要性
  4. 2jQueryとCSSでハンバーガーメニューを作る方法
  5. 2.1ハンバーガーメニューの作り方
  6. 2.2ナビゲーションの作り方
  7. 2.3jQueryでハンバーガーメニューの機能の作り方
  8. 3まとめ

jQueryとCSSでハンバーガーメニューを作りたい

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

スマホタブレットでWEBサイトを表示した際に見かける3本線のアイコンのことを指しています。3本線のデザインがハンバーガーに見えることからハンバーガーメニューと呼ばれる由来です。

多くのサイトで適用されており、ハンバーガーメニューをクリックすることでメニュー一覧の表示・非表示が切り替わるような仕様になっています。

上記の特徴から画面のスペースが限られているスマホやタブレットで、省スペース化できます。

ハンバーガーメニューの図

レスポンシブ対応の重要性

レスポンシブ対応とはPCやタブレット、スマホなど画面の幅が異なるデバイスで表示する際にそれぞれのデバイスでWEBサイトの見せ方を変えることでデバイスごとに見やすく最適な画面を提供することを指します。

現在ではスマホやタブレットの普及が進んでおり、多くのユーザーがスマホやタブレットといったデバイスでWEBサイトに訪問します。その際にPC表示のWEBサイトしか用意していないとスマホやタブレットユーザーにとっては見づらく、操作性の悪いサイトとなってしまい、ユーザーがWEBサイトから離れてしまう原因になってしまいます。

そのため、SEO対策においてもレスポンシブ対応は重要で、現代ではほぼ必須と言っても良いでしょう。

jQueryとCSSでハンバーガーメニューを作る方法

早速、ハンバーガーメニューの作り方を紹介していきます。

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

まずはハンバーガーメニューアイコンの作り方を見ていきます。

index.html

<div class="hamburger-menu">
  <span class="hamburger-menu__line"></span>
</div><!-- .hamburger-menu -->

index.css

/* ハンバーガーメニュー */
.hamburger-menu{
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 10;
}

.hamburger-menu__line{
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #FFF;
  position: relative;
  transition: all 0.5s;
}

.hamburger-menu__line::before,
.hamburger-menu__line::after{
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #FFF;
  position: absolute;
  transition: all 0.5s;
}

.hamburger-menu__line::before{
  transform: translateY(-12px);
}
.hamburger-menu__line::after{
  transform: translateY(12px);
}

.hamburger-menuでハンバーガーメニューの大枠を設定しています。

その子要素として.hamburger-menu__lineでハンバーガーメニューの真ん中の線を表現しています。さらに、.hamburger-menu__lineの疑似要素::before::afterでハンバーガーメニューの上下の線を表現します。

あわせて読みたい
::before
CSSの::beforeは疑似要素の一つで対象のセレクターの子要素の最初の要素として擬似的な要素を生成します。contentプロパティとよくセットで利用されますが、その使い方をサンプルコード付きで解説します。
あわせて読みたい
::after
CSSの::after(:after)は疑似要素の1つで、指定したセレクタの要素の最後の子要素として擬似的な要素を生成します。::afterの構文や使い方についてサンプルコード付きで解説します。

これだけでハンバーガーメニューのアイコンは完成です。

index.css

.hamburger-menu.open .hamburger-menu__line{
  background-color: transparent;
}
.hamburger-menu.open .hamburger-menu__line::before{
  transform: rotate(45deg);
}
.hamburger-menu.open .hamburger-menu__line::after{
  transform: rotate(-45deg);
}

ハンバーガーメニューアイコンをクリック時には✖印のアイコンに変化するようにスタイルを指定しています。
後に.hamburger-menu.openというclass属性を与えるようにjQueryでコーディングしていきます。

ナビゲーションの作り方

次にハンバーガーメニューアイコンクリック時に表示、非表示となるナビゲーションを作っていきます。

index.html

<nav class="nav-sp">
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
    <li><a href="#">メニュー5</a></li>
  </ul>
</nav><!-- .nav-sp -->

index.css

body {
  overflow-x: hidden;
}

/* ナビゲーション */
.nav-sp{
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  padding: 60px 10px 0;
  background-color: rgba(20,63,143,0.5);
  text-align: left;
  transition: right 0.5s;
}

.nav-sp a{
  display: inline-block;
  padding: 5px 0;
}

.nav-spを非表示にするのではなく、rightプロパティで画面の外に出した状態にします。

このままの状態だと横方向にスクロールバーが現れ、画面の外に出したつもりのナビゲーションが見えてしまうため、bodyセレクタにoverflow-x:hiddenを指定します。

index.css

.nav-sp.open{
  right: 0;
}

ハンバーガーメニューをクリック時には画面の右からナビゲーションが表示されるようにスタイルを指定します。

.hamburger-menu同様に.nav-sp.openclass属性を与えるようにjQueryでコーディングしていきます。

jQueryでハンバーガーメニューの機能の作り方

最後にjQueryでハンバーガーメニューが機能するように作っていきます。

index.js

'use stript';

$(function(){
  // ハンバーガーメニュークリックイベント
  $('.hamburger-menu').click(function(){
    if($('.nav-sp').hasClass('open')){
      // ナビゲーション非表示
      $('.nav-sp').removeClass('open');
      // ハンバーガーメニューを元に戻す
      $(this).removeClass('open');
    }else{
      // ナビゲーションを表示
      $('.nav-sp').addClass('open');
      // ハンバーガーメニューを✖印に変更
      $(this).addClass('open');
    }
  });
});

機能を作りこむと言ってもjQueryで行っているのはclass属性の付け外しのみです。

.hamburger-menuがクリックされた際のイベントを設定しています。

クリック時にはhasClassメソッドで.nav-spセレクタがopenクラスを持っているかの判定をしています。持っている場合には、.nav-spthis(.hamburger-menu)openクラスを与えて、持っていない場合にはopenクラスを外す処理を行っています。

あわせて読みたい
click()
jQueryのclick()は要素をクリックした時、つまりクリックイベントの際に実行する関数を紐付けるメソッドです。click()の使い方をサンプルコード付きで解説します。
あわせて読みたい
hasClass()
jQueryのhasClass()は引数で指定したクラス名を持つ要素が要素集合全ての中で1つでもあればtrueを返し、なければfalseを返します。hasClass()の使い方をサンプルコード付きで解説します。
あわせて読みたい
addClass()
jQueryのaddClass()はセレクタでマッチした要素に対して、addClass(class)の引数で指定したクラスを追加するメソッドです。使い方をサンプルコード付きで解説します。

まとめ

ハンバーガーメニューの作り方を見てきました。コピペで実装できるようになっていますので、参考にしてみてください。

また、自分なりにカスタマイズすることで理解も深まると思うので、ぜひチャレンジしてみてください。

下記ではCSSのみで作るハンバーガーメニューの作り方を紹介しています。ぜひあわせて参考にしてみて下さい。

あわせて読みたい
CSSのみでハンバーガーメニューを作る方法を解説!のイメージ
CSSのみでハンバーガーメニューを作る方法を解説!
ハンバーガーメニューをCSSのみで実装する方法を解説します。CSSのみなのでコードはやや長くなってしまいますが、JavaScriptやjQueryをまだ学んでいない方でもハンバーガーメニューを実装することができるようになります。
今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事