【未経験から独学で】プログラミング学習ロードマップ公開中!記事はこちらから!

【jQuery】ハンバーガーメニューを作ってみよう!

こんにちは、みと(@mito_710_1)です!

今回はjQeryを使ったシンプルなハンバーガーメニュー・レスポンシブなヘッダーの作り方を説明します。

作っていくのはこんな感じ(再生ボタンクリックで再生します)

jQeryまだよくわからないよーって方でも簡単にできますのでご安心を!

本記事はよくあるハンバーガーメニューの仕組みを解説する記事です。

仕組みのわかりやすさを重視してシンプルな記述&派手な着色がしてありますので、本記事の最後に載せているコードをコピペしても良いですがしっかりと見た目を整えるようにしましょう。

またネット上にコピペで作れるおしゃれなハンバーガーメニューがたくさんあります。

ただしコピペした内容が分からないまま使用するのはとても危険です。

そのためこの記事でしっかりと「仕組みを学んでコピペ」しましょう!

それではさっそく作っていきましょう!

使用ツールは以下の通り
・Visual Studio Code(以下VSコード)
・Google Chrome(以下ブラウザ)

これらのツールの使用を前提とした解説をいたしますのでその点ご了承ください。

目次

ハンバーガーメニューの仕組み

ハンバーガーメニューとは名前の通りハンバーガーのような形をしたボタンを押すと表示されるメニューのことです。

基本的にスマホサイズの時のメニューによく使われます

ボタンを押したときのメニューの開閉の仕組みはjQeryを使ったクラスの付け外しによるものです。

例えばあらかじめ△△というクラスを用意し、「△△がついたときはこういう動きをする。」といったことをCSSで記述しておきます。

そしてjQeryで、「ボタンが押されたら○○に△△というクラスをつける。」という記述をすることでCSSが適応されてこの仕組みが出来上がるんですね。

仕組みが理解できたところでさっそくコーディングしていきます!

STEP1 ファイル構成

何でもよいので適当にフォルダを作ったらVSコードで開きましょう。

開いたらその中に下記の通り同じ階層に「index.html」「ress.css」「style.css」「script.js」の4つを作ってください。

ressに関しては愛用のリセットCSSなどがある場合はそちらを代わりに使用していただいて構いません。

リセットCSSについてよく知らないという方はこちらを参考にしてください。

https://magazine.krowl.jp/3441/

ファイルの準備ができたら次のステップに進みましょう!

STEP2 HTMLコーディング

ファイルの準備ができたらHTMLを記述していきます。

index.htmlを開いたら「」を打ってEnterキーを押すと以下のようにHTMLの雛型ができます。

上から2行目、lang=”en”をlang=”ja”に変更して、これから記述する内容が日本語であることを宣言します。

jaに変更したらress.cssを読み込みましょう!

</head>タグ直前に以下のコードを挿入します。

<link rel="stylesheet" href="ress.css">

これでHTML記述の土台ができたので実際にコーディングしていきます!

<body></body>の間にコードを記述しましょう。

記述例は以下の通り

<header class="header">

    <h1 class="title">ヘッダー</h1>  <!-- サイト名など -->

    <!-- ここからハンバーガーメニューアイコン -->
    <button class="hamburger-btn" type="button">
      <span></span>  <!-- 一番上の線 -->
      <span></span>  <!-- 真ん中の線 -->
      <span></span>  <!-- 一番下の線 -->
    </button>

    <!-- ここからメニュー一覧 -->
    <nav class="header-nav">  
      <ul class="header-nav-list">
        <li><a href="#">会社概要</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">採用情報</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>

  </header>


この時点でのブラウザでの表示はこのようになっていますね。

ressを読み込んでいるため<button>タグが見えませんがタイトルとメニューの間にあります。

HTMLの記述は以上になります!

次のステップでCSSを記述しましょう!

STEP3 CSSコーディング

このステップではCSSを記述してヘッダーの見た目を整えていきます。

まずはstyle.cssを読み込みましょう。

以下の記述をressを読み込んだコードの直後に挿入してください。

  <link rel="stylesheet" href="style.css">

CSSが読み込めたところで早速記述していきます!

style.cssを開きコーディングしていきましょう!

記述例は以下の通り

<!-- wp:code -->
<pre class="wp-block-code"><code>.header{
  display:flex;  /* ヘッダー要素の横並び */
  justify-content: space-between;
  align-items: center;  /* 要素を上下中央揃え */
  background-color: #ddd;  /* わかりやすくするための背景色 */
}

.header-nav-list{
  display: flex; /* メニュー一覧の横並び */
}

.header-nav-list li{
  list-style: none;  /* リストの黒丸を消去 */
  margin-right: 12px;
  /* メニューの間隔をとる */
}

.header-nav-list li a{
  text-decoration:none;  /* リストの下線を消去 */
  color:#333;  /* リストの文字色を変更 */
}
</code></pre>
<!-- /wp:code -->

これで全体の並びが横並びになりましたね!

flexboxについてまだよくわからないという人はこちらの記事を参考にしてください

ブラウザでは次のように表示されていると思います。

ハンバーガーメニューが見当たりませんがヘッダーの中央あたりにちゃんとあるのでご安心ください。

続いてハンバーガーメニューの見た目を整えていきます!

記述例は以下の通り

.hamburger-btn{
  position: relative;  /* buttonタグを起点にしてspanタグの位置を決める */
  width: 40px;
  height: 30px;
  transition: all .4s; /* アニメーション速度 */
  border: none;  /* buttonタグの装飾を消去 */
  outline: none;  /* buttonタグの装飾を消去 */
  background: transparent;  /* buttonタグの装飾を消去 */
}

.hamburger-btn span{
  /* すべての線に共通のスタイル */
  display: inline-block;
  transition: all .4s; /* アニメーション速度 */
  position: absolute;  /* buttonタグから見た位置 */
  left: 0;  /* buttonタグの左端に寄せる */
  width: 100%;  /* 横幅をbuttonタグいっぱいに広げる(40px) */
  height: 2px;  /* 線の太さ */
  background-color: #333333;
  border-radius: 4px; 
}

.hamburger-btn span:nth-of-type(1){
  /* 一番上の線の位置 */
  top: 0;
}
.hamburger-btn span:nth-of-type(2){
  /* 真ん中の線の位置 */
  top: 15px;
}
.hamburger-btn span:nth-of-type(3){
  /* 一番下の線の位置 */
  bottom: 0;
}

positionの使い方についてはこちら

侍エンジニアブログ
CSSのposition:absolute;とは?要素を思いのままに配置する方法 | 侍エンジニアブログ この記事では「 CSSのposition:absolute;とは?要素を思いのままに配置する方法 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの...

transirionの使い方についてはこちら

WEBST8のブログ
【CSSでアニメーション】transitionプロパティの使い方 今回は、CSSのtransitionプロパティを利用して、下記のように手軽にアニメーションを作成する方法を紹介します。   https://webst8.com/blog/wp-conten

ここではCSSの疑似要素という機能を使用しています。疑似要素については以下の記事をどうぞ

あわせて読みたい
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう! | ビジネスとIT活用に役立つ情報 前回の記事【初心者向け】CSSセレクタとは?セレクタの種類や指定方法を解説!(基礎編)ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーデ...

もちろん疑似要素を使わなくても上から順に「.bar-top」「.bat-middle」「.bar-bottom」といったクラスを付与してCSSをあてても大丈夫です。

この時点でブラウザでの表示は次のようになっていると思います。

ハンバーガーメニューが見えてきましたね!

しかしPC版ではハンバーガーメニューは必要ないのでせっかく見えるようになりましたが、「.hamburger-btn」に次の記述をして見えなくしておきましょう!

 display:none;  /* PCサイズでは不要なため消しておく */

ここでフォンサイズや高さなど細かな調整をしておきます

記述例は以下の通り

まずは「.header」にこの2行を追加

height:100px;
padding:40px;

続いて「.title」に次の1行を追加します。

font-size:32px;

最後にメニューの文字の大きさを調節します。

「.header-nav-list li a」に次の1行を追加

font-size:20px;

これで余白などバランスが取れたと思います。

この時点でのブラウザでの表示はこんな感じ。

ここまで出来たら次はレスポンシブ化です!

STEP4  レスポンシブ化

ステップ4ではレスポンシブ化をしていきます!

@media screen and (max-width:767px){
 ここにレスポンシブ化用CSSを記述
 }

CSSに上記コードを追加してレスポンシブ化のためのコードを記述していきます。

このSTEP4で追加するCSSはすべて{}この中に記述してください

それではスマホ時のサイズの調整とハンバーガーメニューの表示をしていきます。

記述例は以下の通り

  .header{
    height:50px;
    padding:15px;
  }
  .title{
    font-size:28px;
  }
  .hamburger-btn{
    display:block;/* ハンバーガーメニューを表示 */
  }

ブラウザの幅を狭めて表示を見てみましょう。

このようにハンバーガーメニューが表示されていると思います。

次に、メニュー一覧をヘッダーの下に移動し、ハンバーガーメニューを右端に寄せます。

記述例は以下の通り

.header-nav{
    position: fixed;  /* メニュー位置を固定&.headerのflexが効かないようにする*/
    top:50px;  /* ヘッダーバーの厚さ分下に */
    left:0;
    width:100%;  /* 画面幅いっぱいに */
  }
  .header-nav-list{
    width:100%;  /* 画面幅いっぱいに */
    display: block; /* メニュー一覧の横並びを解除して縦並びに */
    height:calc(100vh - 50px);  /* 高さを画面全体からヘッダー分ひいた大きさに */
    background-color: orange;  /* わかりやすいように背景色 */
  }
  .header-nav-list li{
    margin-right: 0;  /* marginの初期化 */
    border-bottom: solid 1px #333;  /* メニュー幅がわかりやすいように境界線 */
    width:100%;
    height:calc((100vh - 50px) / 4);  /* メニューが4つあるので{(画面高さ) ー (ヘッダー高さ)} ÷ 4 */
  }
  .header-nav-list li a{
    height:100%;  /* 高さをliタグいっぱいに広げる */
    /* 以下の3つで文字の上下中央ぞろえ */
    display: flex;
    justify-content: center;
    align-items: center;
  }


ここでは高さの指定にcalcを使用しています。calcを使うことでサイズの指定を柔軟に行えるようになるのでぜひ習得しましょう。

calcについてはこちら

TechAcademyマガジン - 教育×テク...
サイズ指定に役立つ!CSSでcalc()を使う方法【初心者向け】 | TechAcademyマガジン 初心者向けにCSSでcalc()を使う方法について実際にソースコードを書きながら解説しています。レイアウトの調整やサイズ指定などを行う際に便利なメソッドです。応用的な使...

ここまでの記述でブラウザでの表示はこのようになっていると思います。

だんだんそれっぽくなってきましね!

あとはボタンを押すことでメニューが現れるようにするだけです!

STEP5 ボタンの開閉

ここでは冒頭で話したように、jQeryで付け外しを行うクラスの記述をしていきます。

今回付与するクラス名は.activeです。

クラス名はその場その場で臨機応変に変更してください。すでにほかのところで.activeを使用しているようなら.header-nav-activeなど、他と被らないように命名しましょう。

今回はヘッダーしか作らないため簡単に.activeとしました。

ここで.activeを付与するのは.hamburger-btnと.header-navです。

それぞれCSSを記述していきましょう!

ハンバーガーボタン

.hamburger-btnは.activeがついたときに、子要素のspanタグが回転し✖マークになります。

記述例は以下の通り

 .hamburger-btn.active span:nth-of-type(1){
    -webkit-transform: translateY(14px) rotate(-45deg);
    transform: translateY(14px) rotate(-45deg);
  }
  .hamburger-btn.active span:nth-of-type(2){
    opacity: 0;
  }
  .hamburger-btn.active span:nth-of-type(3){
    -webkit-transform: translateY(-14px) rotate(45deg);
    transform: translateY(-14px) rotate(45deg);
  }


上下の線が回転して✖マークを作り、真ん中の線は透明化して消えるという仕組みですね!

transformについてはこちら。ベンダープレフィックスについても解説されています。

creive【クリーブ】
【CSS】transformの使い方を解説!要素の変形や回転も自由自在 「transformは何ができるの?」 「transformはどんな時に使うの?」 そもそも、「transform」自体に馴染みがないという人が多いのではないでしょうか?ですが、この効果はWeb...

メニューのスライド

.header-navは.activeがつくと、画面外からスライドしてきます。

そのためまずは.activeがついていないときに画面外にいるようにしましょう!

「.header-nav」に次の2行を追加します。

transition: all .8s; /* アニメーション速度 */
transform: translateX(100%);

ブラウザでの確認はできませんがこれでメニュー全体が画面の右外に移動しました。

それでは.activeがついたときに画面内にスライドしてくるようにしましょう。

記述例は以下の通り

.header-nav.active{
transform: translateX(0);
}

これでCSSの記述は終了です!

あとはjQeryで.activeの付け外しをするだけですね!

STEP6 jQeryの記述

このステップではjQeryを使ってクラスの付け外しをします。

記述内容としては

「ハンバーガーボタンが押された時、もしくはメニューを選んだ時に.activeの付け外しを行う」といった内容です。

一連の流れはこんな感じ

STEP
ハンバーガーボタンを押されると.activeが付与される
STEP
ハンバーガーボタンが✖マークになり
メニューがスライド表示される
STEP
✖マークを押すか、メニューを選ぶと.activeがはずれる
STEP
✖マークが元に戻り、メニューが画面外にスライドする

流れが分かったらjQeryを記述していきましょう!

まずはHTMLにてjQeryとscript.jsファイルを読み込みます

以下の記述を</body>の直前に挿入してください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script><!-- jQueryの読み込み -->
<script src=" script.js "></script><!-- JavaScriptの読み込み -->


できましたらscript.jsを開きjQeryを記述しましょう。

記述例は以下の通り

$(function(){
  $(".hamburger-btn,.header-nav a").on("click",function(){
    $(".hamburger-btn,.header-nav").toggleClass("active")
  });
});

jQeryの記述はたったこれだけです!

toggleClassについてはこちら。addClassとremoveClassをこれひとつでできちゃうという便利なやつですね。

STAND-4U
jQuery「toggleClass」で指定のクラスを切り替える方法 - STAND-4U 今回は、jQueryで「指定のクラスを付けたり消したりできる」メソッド「.toggleClass()」について、その使い方をサンプルを交えて解説しよう。

以上でハンバーガーメニューが出来上がりました!

実際にブラウザを開いてハンバーガーボタンを押してみましょう!

ちなみに背景色やフォントサイズ、余白などは適当なのでみなさんのお好みで調整してください!

ハンバーガーメニューの実装おつかれさまでした!

全体のコード例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="ress.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">

    <h1 class="title">ヘッダー</h1>  <!-- サイト名など -->

    <!-- ここからハンバーガーメニューアイコン -->
    <button class="hamburger-btn" type="button">
      <span></span>  <!-- 一番上の線 -->
      <span></span>  <!-- 真ん中の線 -->
      <span></span>  <!-- 一番下の線 -->
    </button>

    <!-- ここからメニュー一覧 -->
    <nav class="header-nav">  
      <ul class="header-nav-list">
        <li><a href="#">会社概要</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">採用情報</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>

  </header>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script><!-- jQueryの読み込み -->
  <script src=" script.js "></script><!-- JavaScriptの読み込み -->  
</body>
</html>

CSS

.header{
  display:flex;  /* ヘッダー要素の横並び */
  justify-content: space-between;
  align-items: center;  /* 要素を上下中央揃え */
  height:100px;
  padding:40px;
  background-color: #ddd;  /* わかりやすくするための背景色 */
}

.title{
  font-size:32px;
}

.hamburger-btn{
  position: relative;  /* buttonタグを起点にしてspanタグの位置を決める */
  width: 40px;
  height: 30px;
  display:none;  /* PCサイズでは不要なため消しておく */
  transition: all .4s; /* アニメーション速度 */
  border: none;  /* buttonタグの装飾を消去 */
  outline: none;  /* buttonタグの装飾を消去 */
  background: transparent;  /* buttonタグの装飾を消去 */
}

.hamburger-btn span{
  /* すべての線に共通のスタイル */
  display: inline-block;
  transition: all .4s; /* アニメーション速度 */
  position: absolute;  /* buttonタグから見た位置 */
  left: 0;  /* buttonタグの左端に寄せる */
  width: 100%;  /* 横幅をbuttonタグいっぱいに広げる(40px) */
  height: 2px;  /* 線の太さ */
  background-color: #333333;
  border-radius: 4px; 
}
.hamburger-btn span:nth-of-type(1){
  /* 一番上の線の位置 */
  top: 0;
}
.hamburger-btn span:nth-of-type(2){
  /* 真ん中の線の位置 */
  top: 15px;
}
.hamburger-btn span:nth-of-type(3){
  /* 一番下の線の位置 */
  bottom: 0;
}

.header-nav-list{
  display: flex; /* メニュー一覧の横並び */
}

.header-nav-list li{
  list-style: none;  /* リストの黒丸を消去 */
  margin-right: 20px;
}

.header-nav-list li a{
    text-decoration:none;  /* リストの下線を消去 */
    color:#333;  /* リストの文字色を変更 */
    font-size:20px;
}

@media screen and (max-width:767px){
  .header{
    height:50px;
    padding:15px;
  }
  .title{
    font-size:28px;
  }
  .hamburger-btn{
    display:block;/* ハンバーガーメニューを表示 */
  }
  .hamburger-btn.active span:nth-of-type(1){
    -webkit-transform: translateY(14px) rotate(-45deg);
    transform: translateY(14px) rotate(-45deg);
  }
  .hamburger-btn.active span:nth-of-type(2){
    opacity: 0;
  }
  .hamburger-btn.active span:nth-of-type(3){
    -webkit-transform: translateY(-14px) rotate(45deg);
    transform: translateY(-14px) rotate(45deg);
  }
  .header-nav{
    position: fixed;  /* メニュー位置を固定 */
    top:50px;  /* ヘッダーバーの厚さ分下に */
    left:0;
    width:100%;  /* 画面幅いっぱいに */
    transition: all .8s; /* アニメーション速度 */
    transform: translateX(100%);
  }
  .header-nav.active{
    transform: translateX(0);
  }
  .header-nav-list{
    width:100%;  /* 画面幅いっぱいに */
    display: block; /* メニュー一覧の横並びを解除して縦並びに */
    height:calc(100vh - 50px);  /* 高さを画面全体からヘッダー分ひいた大きさに */
    background-color: orange;  /* わかりやすいように背景色 */
  }
  .header-nav-list li{
    margin-right: 0;  /* marginの初期化 */
    border-bottom: solid 1px #333;  /* メニュー幅がわかりやすいように境界線 */
    width:100%;
    height:calc((100vh - 50px) / 4);  /* メニューが4つあるので{(画面高さ) ー (ヘッダー高さ)} ÷ 4 */
  }
  .header-nav-list li a{
    height:100%;  /* 高さをliタグいっぱいに広げる */
    /* 以下の3つで文字の上下中央ぞろえ */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

JavaScript

$(function(){
  $(".hamburger-btn,.header-nav a").on("click",function(){
    $(".hamburger-btn,.header-nav").toggleClass("active")
  });
});
  • ブロックエディター『Gutenberg』に完全対応
  • 豊富なカスタマイズとシンプルで美しいデザイン
  • 100%GPLテーマだから複数サイトで使用可能
美しく高機能なテーマ「SWELL」で楽しく記事を書こう!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる