シンプルなハンバーガーメニュー【簡単】

シンプルなハンバーガーメニュー

こんにちは、ゆきまるです。

コーディング案件でハンバーガーメニューは幾度となく使ってきましたね~。

何回も使うので、シンプルなハンバーガーメニューが書けるととても便利ですよね。

というわけで今回は、出来る限り無駄を削った、
分かりやすい構造で変更のしやすいハンバーガーメニューを紹介します。

  1. シンプルなハンバーガーメニューのデモ
  2. シンプルなハンバーガーメニューのソースコード
  3. このハンバーガーメニューの特長

シンプルなハンバーガーメニューのデモ

動作の確認はResultボタンから。

ソースコードは下にものせています。

See the Pen hamburger by ゆきまる (@yukimaru-org) on CodePen.

シンプルなハンバーガーメニューのソースコード

CodePenはデモ用です。

見やすいようにソースコードも並べておきます。

HTML

<div class="header-btn" id="header_btn">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

CSS

.header-btn .bar {
    width: 20px;
    height: 2px;
    background-color: #000;
    transition: .2s;
}
    
.header-btn .bar + .bar {
    margin-top: 6px;
}
.header-btn.js-active .bar:nth-of-type(1) {
    transform: translateY(8px) rotate(-45deg);
}
        
.header-btn.js-active .bar:nth-of-type(2) {
    opacity: 0;
}
        
.header-btn.js-active .bar:nth-of-type(3) {
    transform: translateY(-8px) rotate(45deg);
}

JavaScript

window.onload = function () {
    var headerBtn = document.getElementById('header_btn');
    
    headerBtn.addEventListener('click', function () {
        this.classList.toggle('js-active');
    });
};

このハンバーガーメニューの特長

このハンバーガーメニューの特長は以下。

  • position不使用
  • ::before::after不使用
  • 全部ブロック要素
  • 全部div

どうですか?小細工はせずにシンプルさを追求しました。

大きさや間隔、アニメーションを自由に調整して使ってくださいね。

最近の記事