この記事ではHTML,CSS,jQueryを用いた「ハンバーガーメニュー」の作り方を解説します。
SP（モバイル）サイズではハンバーガーメニューを、PCではナビゲーションメニューが表示されるようにしていきます。
- jQueryを使ったハンバーガーメニューの作り方
- レスポンシブによるSPとPCの表示切替
なお関連記事として、下記の記事で「JavaScriptを使ったハンバーガーメニュー」について解説していますので合わせて一読ください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
サンプルのダウンロード
下記のリンクからサンプルをダウンロードしましょう。
ファイルを開くと、下記2つのファイルが入っています。
- 「code」→HTML・CSSファイル・画像ファイルが入っているファイル
- 「mock」→モックアップ画像
下記からサンプルコードを確認することもできます。
See the Pen jQueryを使ったハンバーガーメニュー by ZeroPlus (@zeroplus-programming) on CodePen.
デザインの確認
エディタでファイルを開くと、mockフォルダの中にモックアップ画像ファイルが3つ入っています。全体のデザインを確認しましょう。
SP（モバイル）デザイン（sp-mock.png）
ハンバーガーメニューをクリックしたときにナビゲーションメニューが出るようにしていきます。
PCのデザイン（pc-mock.png）
PCデザインのときはハンバーガーメニューは非表示、ナビゲーションメニューが表示されるようにしていきます。
コーディングしてみよう
コーディングを行う際はいきなりコードを記述せず、サイトのデザインを確認します。
- サイトのデザインを確認する
- HTMLでサイトの構造を記述する
- CSSでサイトの見た目を整えていく
- jQueryで動きをつけていく
上記の流れを意識して、実際にコーディングを行っていきます。
全体のレイアウト
HTMLで構造を記述する
まずは大枠を作成します。
<body>
<div class="container">
<header class="header">
</header>
<main>
<div class="main">
メインコンテンツエリア
</div>
</main>
<footer class="footer">
<div>
フッターエリア
</div>
</footer>
</div>
</body>containerクラスの中にheader、footer、main、を記述します。
CSSでサイトの見た目を整えていく
今回のサイトを制作するにあたってこちらのサイトを参考にreset.cssを作成し、linkタグでreset.cssを適用します。
reset.cssは各ブラウザで適用されているデフォルトスタイルを上書きして、各ブラウザのスタイルを揃える役割があります。
reset.cssはstyle.cssより先に記述しています。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Document </title>
<link rel="stylesheet" href="reset.css">
<!--style.cssの前にreset.cssを読み込む -->
<link rel="stylesheet" href="style.css">
</head>ヘッダーとフッター、mainタグ内のスタイルを整える
style.cssにmainタグ、footerタグにスタイルをあてます。
/* 調整用スタイル */
a {
text-decoration: none;
}
ul,
li {
list-style: none;
}
main {
background-color: #f1f1f1;
height: 800px;
display: flex;
}
.main {
margin: auto;
}
.footer {
background-color: #f6f6f6;
height: 200px;
display: flex;
}
.footer div {
margin: auto;
}aタグはデフォルトでアンダーラインが表示されるので、text-decoration: none;を用いてアンダーラインを非表示にします。
ulタグ、liタグも同様に「・」がデフォルトで文頭に表示されるので、list-style: none;を用いて非表示にします。
続いてヘッダーにスタイルをあてます。
/* ヘッダー */
.header {
background-color: white;
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}スクロールしてもヘッダーを追従させたいので、position: fixed;を適用します。
また、ヘッダーは表示順を上にしたいのでz-index: 999;を指定します。
ヘッダーを作る
HTMLで構造を記述する
headerタグの中を作ります。
<header class="header">
<div class="header__inner">
<h1 class="header__title header-title">
<a href="#">
<img src="images/logo-black.png" alt="ロゴ画像">
</a>
</h1>
<nav class="header__nav nav">
</nav>
<button class="header__hamburger hamburger">
</button>
</div>
</header>ヘッダーの中の左右の余白を確保するため、header-innerクラスを入れています。h1タグの中にはimgタグでロゴ画像を適用しています。ロゴ画像をクリックしたらトップに戻りたいのでimgタグをaタグで囲います。
ナビゲーションメニュー用にnavタグを記述します。
ハンバーガーメニューはbuttonタグで作成します。buttonタグで作る理由はフォーカスを適用させるためです。divタグで作るとフォーカスが当たりません。
CSSでヘッダーの見た目を整えていく
2022年現在、モバイルファーストで記述することが推奨されているので、SP（モバイル）サイズから適用していきます。
style.cssに下記のように記述します。
.header__inner {
padding: 0 20px; /*左右の余白確保*/
display: flex; /*ロゴとハンバーガーメニューを横に並べる*/
align-items: center;
justify-content: space-between;
height: inherit; /*親要素の高さを継承*/
position: relative;
}
/* ヘッダーのロゴ部分 */
.header__title {
width: 80px;
}
.header__title img {
display: block;
width: 100%;
height: 100%;
}
/* ヘッダーのナビ部分 */
.header__nav {
position: absolute;
right: 0;
left: 0;
top: 0;
width: 100%;
height: 100vh;
transform: translateX(100%);
background-color: #fff; /*ハンバーガーメニュークリック時のナビゲーションメニュー背景色*/
transition: ease .4s; /*ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延*/
}
/* ハンバーガーメニュー */
.header__hamburger {
width: 48px;
height: 100%;
}
.hamburger {
background-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
border-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
z-index: 9999;
}header-innerクラスではロゴの左側とハンバーガーメニューの右側に余白をpaddingで確保しています。
ロゴとハンバーガーメニューを横並びにしたいのでflexboxを利用しています。
header__navクラスはtransform: translateX(100%);でコンテンツよりも右側に移動させておきます。
hamburgerクラスはフォーカスを当てたいのでbuttonタグを使用します。その際にbuttonタグにデフォルトで当たっている一部のスタイルを、別のスタイルで打ち消します。
ハンバーガーメニューを作る
HTMLで構造を記述する
ハンバーガーメニューを作ります。
<button class="header__hamburger hamburger">
<span></span>
<span></span>
<span></span>
</button>ハンバーガーメニューの三本線を表現するためにspanタグを使用します。
CSSでハンバーガーメニューの見た目を整えていく
/* ハンバーガーメニューの線 */
.hamburger span {
width: 100%;
height: 1px;
background-color: #000;
position: relative;
transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
display: block;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
margin: 8px 0;
}
.hamburger span:nth-child(3) {
top: 0;
}ハンバーガーメニューの三本線をpositionで微調整します。線はwidthとheight、線の色をbackground-colorで表現しています。
ハンバーガーメニュークリック後の動きを作る
HTMLで構造を記述する
<nav class="header__nav nav" id="js-nav">
<ul class="nav__items nav-items">
</ul>
</nav>
<button class="header__hamburger hamburger active" id="js-hamburger">
<span></span>
<span></span>
<span></span>
</button>ハンバーガーメニューをクリックしたらactiveクラスを付与するようにしていきます。activeクラスが付いた状態のレイアウトを画面で確認しながらスタイルを整えたいので、hamburgerクラスにactiveクラスを併記しておきます。
「ハンバーガーメニューをクリックしたらactiveクラスを付与する」というのを、jQueryで制御したいのでidでjs-hamburgerを付けておきます。js-〇〇 というid名は、JavaScript(jQuery含む)で制御するという意味になります。基本的にjs-〇〇はCSSでスタイルを付けません。
navタグもjQueryで動きを制御したいのでidを付与します。
CSSでハンバーガーメニューの見た目を整えていく
* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
transform: translateX(0);
}
.hamburger.active span:nth-child(1) {
top: 5px;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: -13px;
transform: rotate(-45deg);
}hamburgerクラスにactiveクラスが付いた状態のスタイルを記述していきます。
アクティブクラスがついたら三本線の真ん中はopacityで透明にします。
他の線はtransform: rotate(○○deg);で回線させ「×」になるように調整します。
ハンバーガーメニュークリック後activeクラスが付いたら、transform: translateX(0);にして元の位置に戻るように設定しておきます。
activeクラスが付いた状態のスタイルを確認したら、HTMLからactiveクラスを削除します。
このように、jQueryやJavaScriptを使って特定のクラス（今回の場合はactiveクラス）が付与された後のレイアウトを整えたい場合は、「HTML側にそのクラスを付けた状態でCSSで適用していく」やり方がおすすめです！
ハンバーガーメニュークリック時の動きを制御する
ここからjQueryを使ってハンバーガーメニューの動きを制御していきます。
jQueryはJavaScriptでできることをより簡単な記述で実現できる便利なライブラリです。JavaScriptでは数十行の記述も、jQueryでは数行で済むというメリットがあります。
jQueryの導入
jQueryを使用する際は下記の2つの方法があります。
- ファイルをローカルで読み込む
- CDNで読み込む
CDNで読み込む方法が簡単なので、この記事ではCDNを使っていきます。CDNとは「Content Delivery Network」の略で外部ファイルをリンク1つで使用することができる仕組みです。
jQueryのCDNはこちらの公式サイトから利用することができます。
jQueryのCDNはHTMLのbodyタグの直前で、かつ、main.jsの直前に読み込みたいので下記のように記述します。
<footer class="footer">
<div>
フッターエリア
</div>
</footer>
</div>
<!-- jQueryのCDNをmain.jsの直前の記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>これでjQueryを使用する環境が整いました。なお、main.jsの後にCDNを読み込ませてしまうとjQueryが動作しません。CDNを読み込ませる場合は、必ずメインの処理を記述するファイルの直前に読み込みましょう。
ハンバーガーメニュークリック時の動作
jQueryを使う準備ができたら、main.jsファイルに下記の記述をします。
const ham = $('#js-hamburger'); //js-hamburgerの要素を取得し、変数hamに格納
const nav = $('#js-nav'); //js-navの要素を取得し、変数navに格納
ham.on('click', function () { //ハンバーガーメニューをクリックしたら
console.log("ok!"); //コンソール画面でokというメッセージが出る
});「$（ドルマーク）」はjQueryにおいて関数や変数を定義する際に使用されます。
上記で記述した$は全てjQueryに置き換えたとしても同じように動作します。しかしjQueryと記述するとコードが長くなるので$で代用している形になっています。
ナビゲーションメニューを変数navに、ハンバーガーメニューを変数hamに格納します。
onメソッドのクリックイベントを用いてクリックされたかどうかの判定をします。今回はハンバーガーメニューをクリックしたらクリックイベントを発動させたいので、先ほど作成した変数hamを使用していきます。
「ハンバーガーメニューをクリックしたら」クリックイベントが発動するか確認するため、console.logを使って確認していきます。
コンソール画面で「ok!」のメッセージが表示されればOKです。もしこの時点で表示されなければ、下記の理由が考えられます。
- 要素が取得できていない（スペルミスなど）
- functionなどの記述ミス
- HTML側でidを付けていない（js-〇〇）
- HTML側のid名のスペルミス
- HTML側のid名とdocument.querySeletorで取得するid名が一致していない
「ok!」のメッセージが表示されたらクリックイベントの確認が取れましたので、クリックイベントの中を作っていきます。
ハンバーガーメニューをクリック時の実装
console.logは不要なので削除します。
const ham = $('#js-hamburger');
const nav = $('#js-nav');
ham.on('click', function () { //ハンバーガーメニューをクリックしたら
ham.toggleClass('active'); // ハンバーガーメニューにactiveクラスを付け外し
nav.toggleClass('active'); // ナビゲーションメニューにactiveクラスを付け外し
});
toggleClassメソッドはjQueryのメソッドの1つで、クラスのつけ外しを行うことができます。その他によく使われるメソッドでは以下のものがあります。
- addClassメソッド：クラスを付与する
- removeClassメソッド：クラスを外す
toggleClassメソッドは、addClassメソッドとremoveClassメソッドの切り替えを行っています。
この状態でクリックするとハンバーガーメニューの三本線が「×」に代わるようになります。そしてナビゲーションの白背景（header__navクラス）が右側から出現します。
ナビゲーションメニューを作る
HTMLで構造を記述する
ナビゲーションメニューを作ります。
<nav class="header__nav nav" id="js-nav">
<ul class="nav__items nav-items">
<li class="nav-items__item"><a href="">メニュー</a></li>
<li class="nav-items__item"><a href="">メニュー</a></li>
<li class="nav-items__item"><a href="">メニュー</a></li>
<li class="nav-items__item"><a href="">メニュー</a></li>
</ul>
</nav>ナビゲーションメニューはulタグ、liタグで作っていきます。メニューをクリックしたらリンク先に遷移するようにaタグも記述します。
CSSでナビゲーションメニューのスタイルを整える
.nav-items {
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* ナビのリンク */
.nav-items__item a {
color: black;
width: 100%;
display: block;
text-align: center;
font-size: 20px;
margin-bottom: 24px;
}
.nav-items__item:last-child a {
margin-bottom: 0;
}メニュー間の余白を調整するため、margin-bottomで余白を設けます。最後のメニューに関しては、下余白は不要なのでlast-childでmargin-bottomを0にして余白を打ち消します。
これでSP（モバイル）サイズは完成しました。次にレスポンシブ対応するためにPCサイズを作ります！
レスポンシブでPCサイズを作る
レスポンシブではメディアクエリを使用します。
モバイルファーストかPCファーストかで書き方が異なります。
- @medeia screen and (min-width: ○○px) { }・・・モバイルファースト
- @medeia screen and (max-width: ○○px) { }・・・PCファースト
今回は960pxからPCサイズに設定したいので、@medeia screen and (min-width: 960px) とします。
CSSでPCサイズのスタイルを整える
書き方はいろいろありますが、ここではSP時のスタイルの直下にPC時のスタイルを記述する形にします。ブロックごとに分けることで、あとでスタイルが変更になった場合でも修正しやすくなります。
なお@media screen and (min-width: 960px)の中でまとめて適用しても大丈夫です。
/* ヘッダーのロゴ部分 */
.header__title {
width: 80px;
}
@media screen and (min-width: 960px) {
.header__title {
width: 120px;
}
}
/* ヘッダーのナビ部分 */
.header__nav {
position: absolute;
right: 0;
left: 0;
top: 0;
width: 100%;
height: 100vh;
transform: translateX(100%);
background-color: #fff;
transition: ease .4s;
}
@media screen and (min-width: 960px) {
.header__nav {
position: static;
transform: initial;
background-color: inherit;
height: inherit;
display: flex;
justify-content: end;
width: 50%;
}
}
/*PC時のナビゲーションメニュー、横並びにする*/
@media screen and (min-width: 960px) {
.nav__items {
width: 100%;
display: flex;
align-items: center;
height: initial;
justify-content: space-between;
}
}
.nav-items {
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
@media screen and (min-width: 960px) {
.nav-items {
position: inherit;
top: 0;
left: 0;
transform: translate(0, 0);
}
}
/* ナビのリンク */
.nav-items__item a {
color: black;
width: 100%;
display: block;
text-align: center;
font-size: 20px;
margin-bottom: 24px;
}
@media screen and (min-width: 960px) {
.nav-items__item a {
margin-bottom: 0;
}
}
/*ハンバーガーメニュー*/
.hamburger {
background-color: transparent;
border-color: transparent;
z-index: 9999;
}
@media screen and (min-width: 960px) {
/*PC時非表示にする*/
.hamburger {
display: none;
}
}ハンバーガーメニューはPC時非表示にしたいのでdisplay: none;を適用します。
ナビゲーションメニューはSP時縦並びになっていましたが、PC時では横並びに変更したいのでflexboxを適用していきます。
まとめ
この記事で紹介したハンバーガーメニューの作り方は一つの例です。JavaScriptでもjQueryでもハンバーガーメニューを作成することができます。
ハンバーガーメニューは多くのWebサイトで取り入れられているパーツの1つです。
デザインによって、さまざまな実装が求められるので自分の手でカスタマイズできるようになりましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
