【初心者向け】ハンバーガーメニューの作り方
【初心者向け】ハンバーガーメニューの作り方

【初心者向け】ハンバーガーメニューの作り方

【初心者向け】ハンバーガーメニューの作り方 コーディング 2023.03.03

jQueryを使ったハンバーガメニューの作り方を紹介します。 jQueryの知識がなくてもハンバーガーメニューは簡単に作ることができます。

コンテンツ

  • ハンバーガーメニューの仕組み
  • ハンバーガーメニュー作成手順
  • HTML
  • HTMLの解説
  • jQuery
  • jQueryの解説
  • 実際の動き
  • CSS
  • ０１　ボタンのCSS 【クリック前】
  • ボタン【クリック前】のCSS解説
  • ０２　ボタンのCSS 【クリック後　.showが追加されている】
  • ボタンのCSS 【クリック後　.showが追加されている】CSS解説
  • ０３　メニューリストのCSS【クリック前】
  • ボタンのCSS【クリック前】CSS解説
  • ０４　メニューリストのCSS【クリック後　.showが追加されている】
  • メニューリストのCSS【クリック後　.showが追加されている】CSS解説
  • ハンバーガーメニューの完成
ハンバーガーメニューの仕組み

まずハンバーガーメニューの仕組みを簡単に解説します。

  1. まず、HTMLでハンバーガーメニューのボタンとなる要素をつくります。
  2. 次にjQueryで、「ボタンをクリックしたとき」に、「指定したHTMLタグにクラスを追加」させます。
  3. 追加したクラスにCSSを当てて、要素に動きを与えて行きます。
ハンバーガーメニュー作成手順
  1. HTMLを組む
  2. jQueryでHTMLタグにクラスを追加する仕組みを作る
  3. cssを当てる

早速つくっていきます。

HTML <span class="nav_toggle"> <i></i> <i></i> <i></i> </span> <nav class="nav"> <ul class="nav_menu_ul"> <li class="nav_menu_li"><a href="#">TOP</a></li> <li class="nav_menu_li"><a href="#">ABOUT</a></li> <li class="nav_menu_li"><a href="#">BLOG</a></li> <li class="nav_menu_li"><a href="#">CONTACT</a></li> </ul> </nav>HTMLの解説

１〜５行目

<span class="nav_toggle"> <i></i> <i></i> <i></i> </span>

この部分がハンバーガーメニューのボタンになります。 iタグでハンバーガメニューの線を表現します。

６〜１３行目

<nav class="nav"> <ul class="nav_menu_ul"> <li class="nav_menu_li"><a href="#">TOP</a></li> <li class="nav_menu_li"><a href="#">ABOUT</a></li> <li class="nav_menu_li"><a href="#">BLOG</a></li> <li class="nav_menu_li"><a href="#">CONTACT</a></li> </ul> </nav>

この部分がハンバーガーメニューのメニューリストになります。 ボタンのクリックによって、表示/非表示が切り替わる部分です。

jQuery $('.nav_toggle').on('click', function () { $('.nav_toggle, .nav').toggleClass('show'); }); jQueryの解説

１行目

$('.nav_toggle').on('click', function ()

ここでは、なんの動作をトリガーにしてjQueryが動くのかを定義しています。 .nav_toggle（ボタン）　をクリックすると後続の{}内の記述を実行します。 (‘.nav_toggle’)　ここには、3本の線の親要素のクラス名を記述します。

２行目

$('.nav_toggle, .nav').toggleClass('show');

ボタンをクリックしたことで変化させたい要素のクラス名を表示します。

.nav_toggle（ボタン）　→　クリックで3本線を にする .nav（メニューリスト）→　表示/非表示の切り替え なので、.nav_toggle（ボタン）　と　.nav（メニューリスト）　に、　showというクラスを付与する

３行目

});

jQuery 終了

実際の動き

ボタンをクリックするとデベロッパーツール ではこういう形で表示されます。 クリックの動作を拾って、指定した要素にshowが追加されています。 jQueryの作業はこれで終了です。

.showがあるときと、ないときのCSSを記述して要素に動きを持たせます。

CSS

CSSはパーツとその状態ごとに解説していきます。 全部で以下の４パターンです。

ボタン ０１　クリックされる前 ０２　クリック後（クラスに.showが追加されている）

メニューリスト ０３　クリックされる前 ０４　クリック後（クラスに.showが追加されている）

メニューが表示されている状態＝ボタンがクリックされたとき＝.show が要素に追加されているとき ということになります。

０１　ボタンのCSS 【クリック前】 .nav_toggle { display: block; position: relative; width: 1.75rem; height: 1.5rem; } .nav_toggle i { display: block; width: 100%; height: 2px; background-color: #333; position: absolute; transition: transform .5s, opacity .5s; } .nav_toggle i:nth-child(1) { top: 0; } .nav_toggle i:nth-child(2) { top: 0; bottom: 0; margin: auto; } .nav_toggle i:nth-child(3) { bottom: 0; } ボタン【クリック前】のCSS解説

.nav_toggle＝3本線の親要素 この要素を基準にして内包する線の位置を定義

.nav_toggle i＝3本線 3本線の本体となる部分 transition: transform .5s, opacity .5s; で、変化させるプロパティと変化にかかる時間を定義 transformとopacityを.5秒かけて変化させています ボタンクリック時のアニメーションの速度を調整したい場合は、ここの数値を変更してください

.nav_toggle i:nth-child(1)＝3本線の一番上 .nav_toggle i:nth-child(2)＝3本線の真ん中 .nav_toggle i:nth-child(3)＝3本線の一番下 それぞれの線の位置を定義

０２　ボタンのCSS 【クリック後　.showが追加されている】 .nav_toggle.show i:nth-child(1) { transform: translateY(10px) rotate(-45deg); } .nav_toggle.show i:nth-child(2) { opacity: 0; } .nav_toggle.show i:nth-child(3) { transform: translateY(-12px) rotate(45deg); } ボタンのCSS 【クリック後　.showが追加されている】CSS解説

ボタンがクリックされて、.show が要素に付与されたときに当たるCSSです。

.nav_toggle.show i:nth-child(1)＝3本線の一番上 .nav_toggle.show i:nth-child(3)＝3本線の一番下 になるようにそれぞれの線の傾きと縦方向の位置を定義 transition: transform .5s, opacity .5s;で変化させるプロパティと、変化にかかる時間を定義しているので、 .5秒かけて線が傾いていきます。

.nav_toggle.show i:nth-child(2)＝3本線の真ん中 opacity:1; →opacity: 0;＝opacityにもtransitionで変化にかかる時間を指定しているので、ボタンが押されると.5秒かけて非表示になります。

クリックされるとこういう感じの動きになります。

０３　メニューリストのCSS【クリック前】 .nav { position: fixed; top: 3rem; left: 0; right: 0; bottom: 0; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; } ボタンのCSS【クリック前】CSS解説

transition: opacity .5s, visibility .5s; で、変化させるプロパティと変化にかかる時間を定義

０４　メニューリストのCSS【クリック後　.showが追加されている】 .nav.show { opacity: 1; visibility: visible; } メニューリストのCSS【クリック後　.showが追加されている】CSS解説

.navのとき opacity: 0; → .navi.showのとき opacity: 1; transition で指定した通り.5秒かけて変化します。

visibility: hidden; → visibility: visible; こっちも同様にtransitionで指定した通り.5秒かけて変化します。

ハンバーガーメニューの完成

クリックするとこんな感じになります。

ハンバーガーメニューは初めて作るとなると、どうやってつくったらいいのか、どんな仕組みになっているのかわからない、jQueryってなに…など、わからないことが多くて戸惑ってしまうと思います。 作ってみると仕組みはとてもシンプルで、jQueryを３行書いて、クラスを付与して、あとはHTMLとCSSだけで作ることができるので一度理解してしまえば今後はハンバーガーメニューだけでなく、画像のフェードインや、ローディング画面など、他にもいろいろなところで応用がきくので、一度作ってみるといいかもしれません。

  • CSS
  • HTML
  • jQuery
  • 初心者向け
この記事が良かったらシェアお願いしますこの記事を書いたのは

ライター

KOP 編集部

Web制作会社が実際に現場で使う、デザインやコーディングに関するtipsを発信します。より「わかりやすい！」を目指し、「現場ではこれくらいの認識でOK」というレベルまで情報を“削って”お届けしております。

ホームページ制作 東京｜株式会社KOP トップページはコチラ

Web制作に関するTipsを発信中！ @kopjapan フォローする Macのターミナルで入力テキストを一括削除する方法 ［Adobe XD］要素間の間隔をSketchのように数値指定したい場合こちらもおすすめ
  • 【初心者向け】jQueryでタブ切り替えのイベントを実装する方法 コーディング 2022.08.13

    今回は、jQueryを使ってタブの切り替えを実装する方法について、初心者向けに解説していきます。 jQueryでタブ切り替えのイベントを実装する…

  • 【初心者向け】モーダルウィンドウをjQueryで簡単に作る方法 コーディング 2022.08.23

    今回は、jQueryを使って、基本的なモーダルウィンドウを作る方法について、解説していきます。 モーダルウィンドウとは モーダルウィンドウ（モー…

  • 【初心者向け】ページトップへ戻るボタンの作り方 コーディング 2022.08.25

    サイトを閲覧していると、一気にぺージ内の上部に移動させたい！というとき、ありますよね。 そんなとき、ページトップへ戻るボタンがあると非常に便利で…

  • 【初心者向け】jQueryでアコーディオンを実装する方法 コーディング 2022.08.16

    今回は、jQueryでアコーディオンを実装する方法について、初心者向けに解説していきます。 アコーディオンの実装は頻出なので、サクッと実装できる…

カテゴリー
  • Webデザイン
  • コーディング
  • それら以外
タグ
  • CSS
  • スマホ
  • iPhone
  • ウィルス
  • Chrome
  • WordPress
  • HTML
  • MySQL
  • PHP
  • ジェネレータ
  • jQuery
  • Illustrator
  • EC-CUBE
  • EFO
  • Mac
  • 初心者向け
  • Windows
  • Adobe XD
  • 色
  • Google
  • JavaScript
  • Web制作の現場語録
  • Excel
  • スプレッドシート
📎📎📎📎📎📎📎📎📎📎