WEBのレスポンシブデザイン化が進み、もはや定番となって久しいハンバーガーメニュー。jQueryで動くアイコンフォント付きの作成例をご紹介します。
動作サンプル
サンプルデモはこちら。
HTML
メニュー開閉ボタンとページ内リンクの飛び先コンテンツで構成されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hamburger navigation</title>
<meta name="description" content="Sample Page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<header>
<nav class="hamburger-nav">
<button type="button" id="hamburger-nav-toggle" class="hamburger-nav-toggle-btn close"></button>
<ul class="hamburger-nav-list">
<li><a href="#first">first</a></li>
<li><a href="#second">second</a></li>
<li><a href="#third">third</a></li>
</ul>
</nav><!-- /.hamburger-nav -->
</header>
<main class="sample-articles">
<article id="first">
<h1>first heading</h1>
<p>ここにはコンテンツの本文が入ります。</p>
<h2>H2 heading</h2>
<p>ここにはコンテンツの本文が入ります。</p>
<ol>
<li>Ordered list item.</li>
<li>Ordered list item.</li>
<li>Ordered list item.</li>
<li>Ordered list item.</li>
<li>Ordered list item.</li>
</ol>
</article>
<article id="second">
<h1>second heading</h1>
<p>ここにはコンテンツの本文が入ります。</p>
<h2>H2 heading</h2>
<p>ここにはコンテンツの本文が入ります。</p>
<h2>H2 heading</h2>
<p>ここにはコンテンツの本文が入ります。</p>
</article>
<article id="third">
<h1>third heading</h1>
<p>ここにはコンテンツの本文が入ります。</p>
<h2>H2 heading</h2>
<p>ここにはコンテンツの本文が入ります。</p>
<ul>
<li>Unordered list item.</li>
<li>Unordered list item.</li>
<li>Unordered list item.</li>
<li>Unordered list item.</li>
<li>Unordered list item.</li>
</ul>
<h3>H3 heading</h3>
<p>ここにはコンテンツの本文が入ります。</p>
<h2>H2 heading</h2>
<p>ここにはコンテンツの本文が入ります。</p>
</article>
</main>
<footer>
<p><small>Copyright © expexp.jp All Rights Reserved.</small></p>
</footer>
<!-- SCRIPTS -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>CSS（common.css）
CSSは見栄えのみ。
body {
/* 英文折り返し */
word-wrap: break-word;
overflow-wrap: break-word;
}
/*---------------------------------------------
Hamburger Navigation
---------------------------------------------*/
.hamburger-nav-toggle-btn {
margin: 1em;
}
.hamburger-nav-toggle-btn.close::before, .hamburger-nav-toggle-btn.open::before {
font-family: 'FontAwesome';
}
.hamburger-nav-toggle-btn.open::before {
content: '\f00d';
}
.hamburger-nav-toggle-btn.close::before {
content: '\f0c9';
}
.hamburger-nav-list {
display: none;
list-style: none;
margin: 0;
padding: 0;
background: #c9c9c9;
}
.hamburger-nav-list > li {
border-bottom: 1px solid #eeeeee;
}
.hamburger-nav-list > li a {
display: block;
padding: 10px 1em;
text-decoration: none;
}
.sample-articles {
padding: 10px 1em;
}
.sample-articles > article {
margin-bottom: 50px;
padding-top: 100px;
}
footer {
border-top: 1px solid #c9c9c9;
margin-top: 100px;
padding: 0 1em 100px;
}JavaScript（common.js）
ハンバーガーメニューの動作は、jqueryがメインとなります。スムーススクロールは動きをキレイに見せるおまけです。
/* Hamburger Navigation Sample */
$(function() {
/* 開閉ボタンをクリックしたら以下の関数を実行 */
$('#hamburger-nav-toggle').click(function() {
/* 開閉ボタンのクラスが'close'（閉じている状態）の場合 */
if($('#hamburger-nav-toggle').attr("class") == 'hamburger-nav-toggle-btn close') {
/* ハンバーガーメニューを展開 */
$('.hamburger-nav-list').slideDown();
/* さらに、開閉ボタンのクラスから'close'を削除し、'open'を付与する */
$(this).removeClass("close").addClass("open");
}
/* 開閉ボタンのクラスが'close'ではない場合 */
else {
/* ハンバーガーメニューを収束 */
$('.hamburger-nav-list').slideUp(function() {
/* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */
$('#hamburger-nav-toggle').removeClass("open").addClass("close");
});
}
}); /* 開閉ボタンをクリックした時の動作はここまで */
/* ハンバーガーメニューのアンカーをクリックしたら以下の関数を実行 */
$('.hamburger-nav-list a').click(function() {
/* 開いている必要はないので、ハンバーガーメニューを収束 */
$('.hamburger-nav-list').slideUp(function() {
/* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */
$('#hamburger-nav-toggle').removeClass("open").addClass("close");
});
});
/* SmoothScroll（おまけ） */
$('.hamburger-nav-list a').smoothScroll();
});
[…] 【jQuery】ハンバーガーメニューを作りたい（ページ内リンク版） […]