最小限のコードでハンバーガーメニューを作る方法【CSS/jQuery】
- 記事をシェアする：
-
-
-
今回は最小限のコードでハンバーガーメニューを作る方法をご紹介します。
様々な記事で実装方法が紹介されていますが、この記事では、
「初学者でも簡単に実装ができる」「余計なアニメーションやコードは省略」
といった、よりプレーン（装飾のない）状態のハンバーガーメニューの実装方法をご紹介します。
コピペで使用可能です。担当されている案件のデザインに合わせてご使用ください。
デモ：完成のイメージ
まずは、簡単なデモをご覧ください。
ハンバーガーボタンをクリックすると、グローバルメニューが表示されます。
縦幅が足りない場合は、縦スクロールができるようになっています。
ソースコード解説
上記デモに使用したソースコードを、HTML、CSS、jQueryに分けて解説していきます。
HTMLの解説
まずは、ハンバーガーボタンとグローバルメニューを作成します。
jQueryでactiveクラスを付け外し、CSSでactiveクラスの有無による表示切り替えを実現させるの土台づくりです。
<header class="header">
<div class="header__inner">
<button class="hamburger header__hamburger" type="button" aria-label="ハンバーガーメニュー開閉"
aria-controls="global-menu">
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
</button>
<div class="global-menu">
<div class="global-menu__contents">
<ul class="global-menu__nav">
<li class="global-menu__nav-item">
<a href="#">トップページ</a>
</li>
<li class="global-menu__nav-item">
<a href="#">サービス</a>
</li>
<li class="global-menu__nav-item">
<a href="#">会社概要</a>
</li>
</ul>
</div>
</div>
</div>
</header>ハンバーガーボタンはspanタグで作成します。spanタグに色を付けてcssアニメーションによって開く⇔閉じるの効果を表現します。
CSS（SCSS）の解説
次にCSSです。
ここでは主に、activeクラスの付け外しに伴うスタイルの変更と、ハンバーガーボタンと展開メニューの配置指定を行っています。
.header {
position: relative; // 基準点として指定（.hamburger の absolute 配置の基準）
height: 70px;
background-color: gray;
}
.hamburger {
position: absolute; // 絶対位置指定（.header を基準に配置）
top: 50%;
transform: translateY(-50%);
right: 40px;
width: 32px; // ハンバーガーボタンの横幅
height: 20px; // ハンバーガーボタンの縦幅
z-index: 1010; // 展開メニューは 1000 で指定
padding: 0; // button タグのデフォルトのスタイルをリセット
background: none;
border: none;
span {
position: absolute;
width: 100%; // .hamburger の width が線の横幅
height: 2px; // 線の太さ
left: 50%; // 中央配置
transform: translateX(-50%);
background-color: black;
}
span:nth-child(1) {
top: 0; // 一番上の線
}
span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%); // 中央の線
}
span:nth-child(3) {
bottom: 0; // 一番下の線
}
&.active {
span {
&:nth-of-type(2) {
display: none; // 中央の線を非表示にして、上下の線のみ残す
}
&:nth-of-type(1) {
transform: translateX(-50%) translateY(calc(50% + 9px)) rotate(-45deg);
// -45° 回転でバツ印を作る（上の線）
}
&:nth-of-type(3) {
transform: translateX(-50%) translateY(calc(50% - 9px)) rotate(45deg);
// 45° 回転でバツ印を作る（下の線）
}
}
}
}
/////* ハンバーガーメニュークリック後に出てくる領域 */////
.global-menu {
position: fixed; // 画面に追従
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1000; // .hamburger は 1010
opacity: 0; // 初期状態は透明
pointer-events: none; // ポインターイベントを禁止（クリックできない状態）
background-color: lightblue;
&.active {
opacity: 1; // 不透明化し、表示
pointer-events: all; // クリックを許可
}
&__contents {
box-sizing: border-box;
width: 100%;
height: 100%; // .global-menu の高さと一致させる
overflow: auto; // メニューが多い場合はスクロールできるようにする
padding: 70px 20px;
}
&__nav-item {
border-bottom: 1px dashed black;
a {
display: block;
text-decoration: none;
padding: 20px 0;
}
}
}
（注意）今回はハンバーガーボタンと展開メニューをposition: absolute;で配置することを想定しています。
したがって実案件で、すでに親要素にpositionプロパティが指定されている場合、意図した挙動にならない可能性があるのでご注意ください。
jQueryの解説
次は、jQueryです。
ここでは主に、ハンバーガーボタンをクリックした場合のactiveクラスの付け外しと、展開メニューのいずれかの場所をクリックしたら展開メニューを閉じる制御を行っています。
$(function() {
// ハンバーガーボタンとメニューの要素を取得
const $hamburger = $('.hamburger');
const $globalMenu = $('.global-menu');
// ハンバーガーボタンがクリックされたときの処理
$hamburger.click(function () {
$hamburger.toggleClass('active'); // ハンバーガーのクラスをトグル（開閉）
if ($hamburger.hasClass('active')) {
// ハンバーガーが「active」になったらメニューを表示
$globalMenu.addClass('active');
} else {
// ハンバーガーが非アクティブならメニューを非表示
$globalMenu.removeClass('active');
}
});
// メニューのどこかをクリックしたら閉じる処理
$globalMenu.click(function (e) {
$globalMenu.removeClass('active'); // メニューを非表示
$hamburger.removeClass('active'); // ハンバーガーの状態も元に戻す
});
});
上記コードでは、activeクラスの付け外しによるハンバーガーボタンの見た目の変化と展開メニューの表示切り替えを行っています。
またそれとは別に、ハンバーガーボタン以外のページリンクやメニュー背景をクリックしたときに展開メニューが閉じるための制御も記述しています。
（実際にはactiveクラスを.global-menuにつけ外ししているだけなので、見た目上の表示切替はCSS側で行っています。）
まとめ
今回の記事では、よりシンプルにハンバーガーメニューが実装できる方法をご紹介しました。
別記事では、このプレーン状態のハンバーガーメニューをより実践的な内容にカスタマイズする方法もご紹介しますので、ぜひそちらも合わせてお読みください。
最後までお読みいただきありがとうございました。
それでは、また別記事でお会いいたしましょう！
