トップ HTML/CSS シンプルなハンバーガーメニュー【簡単】

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

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

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

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

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

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

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

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