【簡単コピペ】CSSとjQueryを使ってハンバーガーメニューを実装しよう
CSSとjQueryを使ってハンバーガーメニューを実装したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
ハンバーガーメニュー by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
三本線をクリックすると閉じる（バツ・×）マークに変換されます。
上記のようなシンプルハンバーガメニューの実装手順は以下の通りです。
HTML
<button class="menu-trigger" id="menu01">
<span></span>
<span></span>
<span></span>
</button>
ハンバーガーメニュー用のHTMLを準備。
上記コードをコピペします。
CSS
.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all 0.4s;
box-sizing: border-box;
position: relative;
z-index: 100;
}
.menu-trigger {
position: relative;
width: 32px;//横幅
height: 26px;//高さ
background: none;
border: none;
appearance: none;
cursor: pointer;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 4px;//太さ
background-color: #172a22;
border-radius: 4px;//角丸
}
.menu-trigger span:nth-of-type(1) {
top: 0;
}
.menu-trigger span:nth-of-type(2) {
top: 11px;//中線の位置
}
.menu-trigger span:nth-of-type(3) {
bottom: 0;
}
/*クリックした後*/
#menu01.active span:nth-of-type(1) {
transform: translateY(11px) rotate(-45deg);//translateYに中線の位置を指定
}
#menu01.active span:nth-of-type(2) {
opacity: 0;
}
#menu01.active span:nth-of-type(3) {
transform: translateY(-11px) rotate(45deg);//translateYに中線の位置を指定
}
次に上記CSSコードをコピぺしましょう。
ここまでの工程で一度ブラウザ確認。
三本線が表示されてたら成功です。
上記コメントアウトされてる部分で数値変更すると、中線の位置・太さ・高さ・形状を変更できます。
任意の値に変更してみましょう。
jQuery
$(function() {
$('.menu-trigger').on('click', function() {
$(this).toggleClass('active');
//任意の実行メソッド
return false;
});
});
最後、スクリプト内に上記コードをコピペします。
※jQueryを使うので事前にライブラリを実装環境に読み込みます。
以上でハンバーガーメニューの実装完了です。
onclick関数内でハンバーガーメニューをクリックした後に出力する任意の実行メソッドなどを追記しましょう。
まとめ
ちょっとした動きをサイトに入れたい時、ハンバーガーメニューを実装してみましょう。
本記事で紹介したようにコピペで簡単に導入できます。
以上で解説を終わります。
目次
