コーディング初学者の多くが躓く、ハンバーガーメニュー！今回はハンバーガーメニューを2パターン作成してくよ★
この記事はjQueryについて学ぶステップの4ステップ目です。
- 【事例で学ぶ】JavaScriptとは何か？
- Webデザイナーが知っておくべきJavaScriptの最低限の文法
- 【これだけ覚えて！】jQueryの書き方
- 【コピペでできる！】jQueryを使用したハンバーガーメニューの作り方（この記事です）
今まで、JavaScriptの用途、JSの基本文法、jQueryの書き方を学んで来ました！！この記事ではjQueryを使用したハンバーガーメニューの実装方法について学んでいきましょう。
フェードインで現れるハンバーガーメニュー
まずはこんな感じのハンバーガーメニューを作っていきます。
ハンバーガーメニュー完成像の確認
ハンバーガーメニューの完成像のコードは以下になります。ざっと確認しておきましょう！
ファイルとフォルダの確認
まずは、こちらのリンクからファイルをダウンロードします。
フォルダの中身を確認しましょう！以下のファイルが格納されています。
- index.html
- style.css
- reset.css
- script.js
index.htmlをブラウザで表示しましょう。現状は、SP版のヘッダーのCSSは記述されていない状態です。
HTMLにボタンを追記しよう
それでは、まずHTMLにハンバーガーボタンのパーツとなる要素を書いていきます。headerの閉じタグの前に以下の記述をしましょう。
<div class="burger-btn"><!-- ③ハンバーガーボタン -->
<span class="bar bar_top"></span>
<span class="bar bar_mid"></span>
<span class="bar bar_bottom"></span>
</div>このHTML要素をCSSで装飾してハンバーガーボタンの見た目を作っていきます。
⚠上記の記述は、賛否両論あると思います。divタグをbuttonにした方が良いとか、spanではなくsvg、または、疑似要素にすべきとか。解説の簡単さを重視して、そういった異論は一旦無視します。
CSSでボタンを装飾しよう
それではCSSでハンバーガーボタンの見た目を作っていきます。今回は3本線があるだけなので、style.cssのSP版の記述に以下のCSSを追記しましょう。
.burger-btn{
display: block;
width: 39px;
height: 39px;
position: relative;
z-index: 3;
border:none;
}
.bar{
width: 20px;
height: 1px;
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
}
.bar_top{
top: 10px;
}
.bar_mid{
top: 50%;
transform: translate(-50%,-50%);
}
.bar_bottom{
bottom: 10px;
}PC版の方では「.burger-btn」をdisplay: none;にして、ハンバーガーボタンを非表示にしておきましょうね。
CSSでハンバーガーメニューが開いたときの見た目をつくろう
それでは次に、ハンバーガーメニューが開いたときの見た目をつくっていきましょう。ハンバーガーメニューが開いたときは以下2点が見た目の変化をして現れます。
- ボタンが3本線から☓印になる
- メニューが非表示から全画面表示になる
3本線が☓印になるCSS
3本線に対して、closeというclassを付加したときにばつ印になるようにCSSを書いていきます。（closeというclassの付加はjQueryを後ほど使用します）
style.cssのSP版の記述の部分に以下のようにCSSを追記しましょう。
.burger-btn.close .bar_top{
transform: translate(-50%,10px) rotate(45deg);
transition: transform .3s;
}
.burger-btn.close .bar_mid{
opacity: 0;
transition: opacity .3s;
}
.burger-btn.close .bar_bottom{
transform: translate(-50%,-8px) rotate(-45deg);
transition: transform .3s;
}これで、「.burger-btn」にcloseというclassが追加されたときに、3本線がばつ印になるCSSはOKです。
ハンバーガーメニューを全画面表示にする
次にハンバーガーメニューを全画面表示にするCSSを書きます。PC版では横並びになっているメニューを縦に並べるのも忘れないようにしましょう。
.nav-wrapper{
/*display: none;*/
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.header-nav{
width: 100%;
height: 100%;
background-color:#1B1310;
z-index: 2;
}
.header-nav.nav-list{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.header-nav.nav-item{
margin-right: 0;
margin-bottom: 40px;
}上記が追記できたら、一番上の display:none; のコメントアウトを外して非表示にしておきます。
jQueryでクリックイベントを設定しよう
それでは最後にjQueryでクリックイベントを設定して、ハンバーガーメニューが開閉するようにしましょう。
まずはindex.htmlのbodyの閉じタグの直前でjQueryとscript.jsを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/script.js"></script>jQueryはGoogleが提供しているCDNを使用しています。
それでは、script.jsに以下の記述をしましょう！
$('.burger-btn').on('click',function(){
$('.burger-btn').toggleClass('close');
$('.nav-wrapper').fadeToggle(500);
});上記の記述を日本語であらわすと以下のような感じです。
- 1行目：.burger-btnをクリックすると
- 2行目：.burger-btnにcloseというclassを追加/削除する
- .nav-wrapperがフェードイン/フェードアウトする
ここで、ブラウザの状態を確認しましょう。ハンバーガーメニューが表示されたときにスクロールできてしまいます。なので、style.cssとscript.jsに以下の記述を追記します。
【style.css】
body.noscroll{
overflow: hidden;
}$('.burger-btn').on('click',function(){
$('.burger-btn').toggleClass('close');
$('.nav-wrapper').fadeToggle(500);
$('body').toggleClass('noscroll');
});これで、ハンバーガーメニューが開いたときにスクロールを固定できます。
横からニュっと出てくるハンバーガーメニュー
次に以下のような横からニュっと出てくるメニューを作りましょう！
ハンバーガーメニュー完成像の確認
ハンバーガーメニューの完成像は以下のような感じです！ボタンを押すと右からメニューが出てきます。
CSSを変更しよう
まずは、.nav-wrpperのCSSを変更します。display: none;になっている部分をtransform: translateX(100%); に書き換えましょう。ついでにtransitionも追記しておきます。
以下のようなコードになります。
.nav-wrapper{
transform: translateX(100%);
transition: .3s;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 2;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
} 次に、メニューが表示されたときの見た目もつくっておきましょう。今回はjQueryを使用して'slide-in'というclassが追加されたときに、transform: translateX(0); になるように設定しておきます。
.nav-wrapper.slide-in{
transform: translateX(0);
transition: .3s;
}これで、jQueryのtoggleClassでclassの追加/削除をしてあげれば0.3秒かけてtransform:translateX();の値が100から0になるはずです。
jQueryの記述を変更しよう
つぎにscript.jsを書き換えましょう。fadeToggleで表示/非表示を切り替えていた箇所を以下のように書き換えます。
$('.burger-btn').on('click',function(){
$('.burger-btn').toggleClass('close');
$('.nav-wrapper').toggleClass('slide-in');
$('body').toggleClass('noscroll');
});これで、横からニュっと出てくるハンバーガーメニューができました！
ハンバーガーメニューはHTML,CSS,jQuery全てが関わってくるので最初は難しく感じるよね💨
しっかりと学んで理解していこう！
