【CSS】シンプルなハンバーガーアイコン（ナビゲーション用に）

2024年5月29日

URLをコピーしました！

クリックで3本線→×に変化する、最もスタンダードなメニューボタンです。
ナビゲーションなどに使えます。

目次（クリックでジャンプ）

シンプルなハンバーガーアイコン

<div class="nav__hamburger" id="navHamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

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');
    });
});