スマートフォン用のメニューボタンでよくある3本線のメニューボタンを、ハンバーガーメニューといいます。
そのハンバーガーメニューをHTMLとCSSで作成する方法と、ハンバーガーメニューをクリックして×印に変更するjavascriptのサンプルです。
※ コピペでそのまま動くと思いますが、自己責任で使用して下さい。
目次
サンプル
以下のような3本線のボタンがハンバーガーメニューのボタンです。クリックすると×印にアニメーション付きで変更されます。
HTML
ポイントは、pタグを埋め込んでいることです。CSSでpタグで真ん中の線を作成し、CSSでaタグの前後で線を作成することで3本線を表示しています。
<div class="menu_wrapper">
<a href="#menu" id="menu_btn"><p>メニュー</p></a>
</div>
CSS
.menu_wrapper {
position: relative;
z-index: 0;
border: 1px solid #333;
width: 45px;
height: 45px;
}
#menu_btn {
display: block;
position: relative;
z-index: 0;
width: 45px;
height: 45px;
cursor: pointer;
}
#menu_btn p,
#menu_btn::before,
#menu_btn::after {
position: absolute;
top: 0;
bottom: 0;
left:0;
right: 0;
width: 30px;
height: 4px;
margin: auto;
background: #333;
}
#menu_btn p {
z-index: 1;
overflow: hidden;
}
#menu_btn::before {
z-index: 2;
transform: translate(0, -10px);
content: "";
}
#menu_btn::after {
z-index: 2;
transform: translate(0, 10px);
content: "";
}
/**
* アニメーションをつける
*/
#menu_btn::before,
#menu_btn::after {
transition: transform 300ms;
}
/**
* ×印
*/
#menu_btn.active p {
opacity: 0;
}
#menu_btn.active::before {
transform: rotate(45deg);
}
#menu_btn.active::after {
transform: rotate(-45deg);
}
jquery
$(document).ready(function () {
$("#menu_btn").on("click", function (event) {
event.preventDefault();
this.classList.toggle("active");
});
});