ハンバーガーメニューの作り方（jQuery・JavaScript）
Webサイト制作の際に、ハンバーガーメニューをコーディングして作成する場面は多いです。
この記事では、ハンバーガーメニューの作成方法を紹介します。jQueryを用いる場合と、プレーンなJavaScriptで記述する場合の2通りを解説します。
今回作成するもの
右上のハンバーガーメニューをクリックすると、メニューがスライドダウンするようなものを作成します。
jQueryを用いる場合
コードは以下の通りです。
jQueryは以下のように記述しています。
$(function(){
$('#hamburger').on('click',function(){
$('#hamburger').toggleClass("open");
$('#header-menu').slideToggle();
});
});
ハンバーガーメニューにhamburgerというidを与えていて、それをクリックした時の関数を書いています。
$('#hamburger').toggleClass("open");
このtoggleClassというのは、指定したCSSクラスが要素に無ければ追加し、あれば削除するという意味で、関数が呼び出されるたびに（ハンバーガーメニューがクリックされるたびに）openクラスをつけたり外したりしています。
$('#header-menu').slideToggle();
slideToggleというのは、スライドダウンとスライドアップを交互に繰り返すという意味があり、ハンバーガーメニューをクリックする度にヘッダーのメニューが出てきたり隠れたりするようにしています。
プレーンなJavaScriptで実装する場合
コードは以下の通りです。
CSSを一部、jQueryの場合とは書き換えています。
JavaScriptは以下のように記述しています。
const menu = document.querySelector('#header-menu')
const btn = document.querySelector('#hamburger')
btn.addEventListener('click', () => {
btn.classList.toggle('open')
menu.classList.toggle('open')
if(menu.classList.contains("open")){
menu.style.height = menu.scrollHeight + 'px'
}else{
menu.style.height = "0"
}
})
ヘッダーのメニューとハンバーガーをそれぞれ定数menu、btnに代入しています。
そして、addEventListenerでハンバーガーがクリックされた時の処理を書きます。
btn.classList.toggle('open')
classList.toggleはjQueryのtoggleClassと同様、指定したCSSクラスが要素に無ければ追加し、あれば削除するという意味で、ハンバーガーをクリックする度にopenクラスをつけたり外したりしています。
ヘッダーメニューの展開・収納の部分ですが、こちらもopenクラスの着脱で制御します。
ヘッダーメニューには以下のCSSを与えており、これによりデフォルトでは非表示になるようにしています。
ul {
height: 0;
overflow: hidden;
transition: .3s;
}
ハンバーガークリック時にopenクラスを付与し、非表示から表示に切り替えます。
menu.classList.toggle('open')
if(menu.classList.contains("open")){
menu.style.height = menu.scrollHeight + 'px'
}else{
menu.style.height = "0"
}
classList.containsで要素が指定されたクラスを含むかどうかを判定しています。
ハンバーガーがクリックされ、ヘッダーメニューにopenクラスが与えられた時、ヘッダーメニューに高さを与えて表示させています。scrollHeightは要素の高さを読み取るプロパティで、読み取った高さをCSSのheightとして指定しています。
openクラスがない時height: 0;に戻しています。
JavaScriptのquerySelectorやaddEventListenerなどは、こちらの記事で解説していますので、ぜひご覧ください。
ハンバーガーメニューのCSS
ハンバーガーメニューの3本の棒はそれぞれspanタグで書いていて、CSSは以下の通りです。openクラスが付与された時、1本目と3本目の棒を斜めにして、真ん中の2本目の棒をopacity: 0;としてバッテンの形を作っています。
<div id="hamburger" class="hamburger">
<span></span><span></span><span></span>
</div>
.hamburger {
position: absolute;
top: 32px;
right:32px;
cursor: pointer;
width: 32px;
height: 24px;
z-index: 10;
}
.hamburger span {
/*3本の線を作る*/
transition: all .3s;
position: absolute;
height: 2px;
background-color: #333;
width:100%;
z-index: 10;
}
.hamburger span:nth-of-type(1) {
/*上の線の位置*/
top: 4px;
}
.hamburger span:nth-of-type(2) {
/*真ん中の線の位置*/
top: 12px;
}
.hamburger span:nth-of-type(3) {
/*下の線の位置*/
top: 20px;
}
.hamburger.open span:nth-of-type(1) {
/*openのとき、上の線を右斜めにする*/
top: 10px;
transform: translateY(6px) rotate(-33deg);
}
.hamburger.open span:nth-of-type(2) {
/*真ん中の線を消す*/
opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
/*下の線を左斜めにする*/
top: 22px;
transform: translateY(-6px) rotate(33deg);
}
以上になります。
最後まで読んでいただきありがとうございました。
参考
Discussion