【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」の４つを作ってください。
ressに関しては愛用のリセットCSSなどがある場合はそちらを代わりに使用していただいて構いません。
リセットCSSについてよく知らないという方はこちらを参考にしてください。
ファイルの準備ができたら次のステップに進みましょう！
STEP2 HTMLコーディング
ファイルの準備ができたらHTMLを記述していきます。
index.htmlを開いたら「！」を打ってEnterキーを押すと以下のようにHTMLの雛型ができます。
上から２行目、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の使い方についてはこちら
transirionの使い方についてはこちら
ここではCSSの疑似要素という機能を使用しています。疑似要素については以下の記事をどうぞ
もちろん疑似要素を使わなくても上から順に「.bar-top」「.bat-middle」「.bar-bottom」といったクラスを付与してCSSをあてても大丈夫です。
この時点でブラウザでの表示は次のようになっていると思います。
ハンバーガーメニューが見えてきましたね！
しかしPC版ではハンバーガーメニューは必要ないのでせっかく見えるようになりましたが、「.hamburger-btn」に次の記述をして見えなくしておきましょう！
display:none; /* PCサイズでは不要なため消しておく */ここでフォンサイズや高さなど細かな調整をしておきます
記述例は以下の通り
まずは「.header」にこの２行を追加
height:100px;
padding:40px;続いて「.title」に次の１行を追加します。
font-size:32px;最後にメニューの文字の大きさを調節します。
「.header-nav-list li a」に次の１行を追加
font-size:20px;これで余白などバランスが取れたと思います。
この時点でのブラウザでの表示はこんな感じ。
ここまで出来たら次はレスポンシブ化です！
STEP4 レスポンシブ化
ステップ４ではレスポンシブ化をしていきます！
@media screen and (max-width:767px){
ここにレスポンシブ化用CSSを記述
}CSSに上記コードを追加してレスポンシブ化のためのコードを記述していきます。
このSTEP４で追加する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タグいっぱいに広げる */
/* 以下の３つで文字の上下中央ぞろえ */
display: flex;
justify-content: center;
align-items: center;
}
ここでは高さの指定にcalcを使用しています。calcを使うことでサイズの指定を柔軟に行えるようになるのでぜひ習得しましょう。
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についてはこちら。ベンダープレフィックスについても解説されています。
メニューのスライド
.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の付け外しを行う」といった内容です。
一連の流れはこんな感じ
メニューがスライド表示される
流れが分かったら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をこれひとつでできちゃうという便利なやつですね。
以上でハンバーガーメニューが出来上がりました！
実際にブラウザを開いてハンバーガーボタンを押してみましょう！
ちなみに背景色やフォントサイズ、余白などは適当なのでみなさんのお好みで調整してください！
ハンバーガーメニューの実装おつかれさまでした！
全体のコード例
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タグいっぱいに広げる */
/* 以下の３つで文字の上下中央ぞろえ */
display: flex;
justify-content: center;
align-items: center;
}
}JavaScript
$(function(){
$(".hamburger-btn,.header-nav a").on("click",function(){
$(".hamburger-btn,.header-nav").toggleClass("active")
});
});
この記事が気に入ったら
フォローしてね！
コメント