クリックで3本線→×に変化する、最もスタンダードなメニューボタンです。
ナビゲーションなどに使えます。
![](https://kizineko.com/coppy/wp-content/uploads/2024/05/chrome-capture-2024-5-29-1.gif)
目次(クリックでジャンプ)
シンプルなハンバーガーアイコン
<div class="nav__hamburger" id="navHamburger">
<span></span>
<span></span>
<span></span>
</div>
nav__hamburger {
cursor: pointer;
span {
display: block;
width: 25px;
height: 2px;
background-color: #333;
margin: 6px 0;
transition: .3s;
}
&.active {
span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
span:nth-child(2) {
opacity: 0;
}
span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
}
}
document.addEventListener("DOMContentLoaded", function() {
const navHamburger = document.getElementById('navHamburger');
navHamburger.addEventListener('click', function() {
navHamburger.classList.toggle('active');
});
});