今回は、ハンバーガーメニューをクリックすると表示・非表示が切り替えられ、背景をクリックでもメニューが閉じる仕様にしていきたいと思います。
デモ・サンプル
まずは、下記のデモで、完成形を確認してみましょう。
HTML
<div class="menu">
<div class="line-list" id="js-hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-bg" id="js-menu-bg"></div>
<nav class="global-nav">
<ul class="link-list">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
</div>
htmlの各要素の説明をしていきます。
<div class="line-list" id="js-hamburger">
<span></span>
<span></span>
<span></span>
</div>
ハンバーガーメニューの元になる要素で、spanの3つがハンバーガーメニューの線になる。
<div class="menu-bg" id="js-menu-bg"></div>
メニューが開いた時に、半透明の黒い背景として出現する要素。
後で、タップもしくはクリックで閉じるようにする。
<nav class="global-nav">
<ul class="link-list">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
メニューが開いた時の中身となる要素。
好きな数だけメニューは入れれます。
ちなみに、メニューが増えると縦にスクロールできるようにします。
CSS
cssは少し多めになってしまいますが、これでも最低限の大事なソースになります。
/* メニュー固定 */
.menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 40px;
}
.line-list {
display: block;
transition: all 0.4s;
box-sizing: border-box;
position: relative;
width: 40px;
height: 40px;
margin-right: 0;
margin-left: auto;
z-index: 300;
}
/* ハンバーガーメニューの棒 */
.line-list span {
display: block;
transition: all 0.4s;
box-sizing: border-box;
position: absolute;
top: 50%;
transform: translateY(50%);
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 1px;
background: #333;
}
.line-list span:nth-child(1) {
margin-top: -6px;
}
.line-list span:nth-child(3) {
margin-top: 6px;
}
/* ハンバーガーメニューが開くときに×にする */
.line-list.active span:nth-child(1) {
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
left: 10px;
}
.line-list.active span:nth-child(2) {
opacity: 0;
}
.line-list.active span:nth-child(3) {
-webkit-transform: translateY(-6px) rotate(45deg);
transform: translateY(-6px) rotate(45deg);
left: 10px;
}
/* メニューが開いたときの黒い半透明の背景 */
.menu-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background: #333;
opacity: 0;
visibility: hidden;
transition: all 0.6s;
cursor: pointer;
}
/* メニューの中身 */
.global-nav {
position: fixed;
right: -320px;
top: 0;
width: 300px;
height: 100vh;
padding-top: 40px;
background: #fff;
transition: all 0.6s;
z-index: 200;
overflow-y: auto;
}
.link-list {
display: block;
margin: 0;
padding: 0;
}
.link-list li {
text-align: center;
padding: 0 14px;
}
.link-list li a {
display: block;
padding: 20px 0;
color: #333;
}
.link-list li:hover {
background: #464646;
}
/* メニューが横から開く */
.nav-open .global-nav {
right: 0;
}
/* メニューが横から開いた時の背景 */
.nav-open .menu-bg {
opacity: 0.8;
visibility: visible;
}
JavaScript
JavaScriptはそんなに難しくなく、簡単です。
ここはコピペで使い回しても問題ありません。
$(function() {
function toggleNav() {
var body = document.body;
var hamburger = document.getElementById("js-hamburger");
var blackBg = document.getElementById("js-menu-bg");
// クリックしたときにクラス付与
hamburger.addEventListener("click", function() {
body.classList.toggle("nav-open");
hamburger.classList.toggle("active");
});
// クリックしたときにクラス付与
blackBg.addEventListener("click", function() {
body.classList.remove("nav-open");
hamburger.classList.remove("active");
});
}
toggleNav();
});
処理の流れとしては、背景かハンバーガーメニューのどちらかがクリックされた時に、cssのクラスを付け外しして、メニューが開くようにし、ハンバーガー部分を×に変形させる。
以上になります。
まとめ
ハンバーガーメニューは、何かと使い回しができて、簡単にデザインの変更なども行ないやすいので、しっかりと使えるようになりましょう!