Ryo Blog

〜WEB制作をスキルに〜

ハンバーガーメニューの実装

2023.11.09

こんなことを説明しています！

上からスライドして出てくるハンバーガーメニューの作り方
メニュー開閉時に背景にあるテキストを固定する方法
SP版からPC版に画面幅を変更した時に自動でメニィーを閉じるようにする方法

解説動画

コードの解説

HTML の記述

<header class="header">
    <div class="logo"><a href="">ロゴ</a></div>
    <div class="drawer-icon">
        <span class="bar bar1"></span>
        <span class="bar bar2"></span>
        <span class="bar bar3"></span>
    </div>
</header>

<div class="drawer-menu">
    <ul class="drawer-list">
        <li class="drawer-item"><a href="#">item1</a></li>
        <li class="drawer-item"><a href="#">item2</a></li>
        <li class="drawer-item"><a href="#">item3</a></li>
        <li class="drawer-item"><a href="#">item4</a></li>
    </ul>
</div>
<div class="drawer-bg"></div>

手順

▶︎ 背景の drawer-bg を drawer-menu の外側に出す！！

背景を押したときに js-open クラスを外すようにしたいので、drawer-menu に背景をつけてしまうと、「メニューを押す」と「背景を押す」の分離ができなくなってしまう。

css の記述

.drawer-menu {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-100%);
    transition: all  0.3s ease;
    &.js-open {
        transform: translateY(0);
    }
}

.drawer-list {
    background: #18eb49;
    padding: 130px 40px 40px;
}

.drawer-bg {
    position: fixed;
    z-index: 98;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(#000, 0.7);
    display: none;
    transition: all  0.3s ease;
    &.js-open {
        display: block;
    }
}

body.no-scroll {
    overflow: hidden;
}

手順① ( drawer-menu )

▶︎ headerの上に隠しておく ( transform: translateY(-100%); )

▶︎ js-open クラスがついたら 0.3秒で ( transition: 0.3s; )

▶︎ headerの下に来るように実装 ( transform: translateY(0); )

手順② ( drawer-menu と drawer-bg の関係 )

▶︎ drawer-menu と drawer-bg は別物として考えて z-indexをmenuが上になるように設定する。

手順③ ( テキストがスクロールしないように )

▶︎ body タグに overflow: hidden; をつけるとスクロールしなくなるので、body に no-scroll クラスがついたときにそれが実行されるように設定しておく。

jQuery の記述

jQuery(function($){

//ドロワーアイコン
$('.drawer-icon').on('click', function () {
    $(this).toggleClass('js-open');
    $('.drawer-menu').toggleClass('js-open');
    $('.drawer-bg').toggleClass('js-open');
    $('body').toggleClass('no-scroll');
    return false;
});
//背景
$('.drawer-bg').on('click', function () {
    $(this).removeClass('js-open');
    $('.drawer-menu').removeClass('js-open');
    $('.drawer-icon').removeClass('js-open');
    $('body').removeClass('no-scroll');
    return false;
});
//リンク
$('.drawer-item a').on('click', function () {
    $('.drawer-bg').removeClass('js-open');
    $('.drawer-menu').removeClass('js-open');
    $('.drawer-icon').removeClass('js-open');
    $('body').removeClass('no-scroll');
    return false;
});
//画面幅を広げたら自動で閉じるように
$(window).resize(function(){
    var windowWidth = $(window).width(); //画面幅
    var pointWidth = 767; //切り替える画面幅 - 1
    if (pointWidth < windowWidth ) {
        //画面幅がpointWidth以上のときの処理を書く
        $('.drawer-bg').removeClass('js-open');
        $('.drawer-menu').removeClass('js-open');
        $('.drawer-icon').removeClass('js-open');
        $('body').removeClass('no-scroll');
        return false;
    }
});
});

手順①

▶︎ 「アイコン」「メニュー」「背景」「スクロール」の４つに対して class のつけ外しを行う

※ 『「ドロワーを開く」= 「 js-open がついている状態」』で統一しておくとわかりやすり

手順② ( resizeの設定 )

SP版のみでドロワーメニューを作る場合は、SP版の画面幅からPC版の画面幅に切り替えた際に、PC版のヘッダーに直る必要があります。これをしておかないと、ドロワーが閉じなくなってしまうことがあります...

解説で使用したスニペット

vs code へのスニペットの登録方法はこちらを参照ください！

scss.json

"top50": {
    "prefix": "top-50%",
    "body": [
        "top: 50%;",
        "transform: translateY(-50%);",
    ],
    "description": ""
},

"left50": {
    "prefix": "left-50%",
    "body": [
        "left: 50%;",
        "transform: translateX(-50%);",
    ],
    "description": ""
},

javascript.json

"resize": {
    "prefix": "resize",
    "body": [
        "\\$(window).resize(function(){",
        "    var windowWidth = $(window).width(); //画面幅",
        "    var pointWidth = 767; //切り替える画面幅 - 1",
        "    if (pointWidth < windowWidth ) {",
        "        //画面幅がpointWidth以上のときの処理を書く",
        "        $1",
        "    }",
        "});",
    ],
    "description": ""
},

"click": {
    "prefix": "click",
    "body": [
        "\\$('$1').on('click', function () {",
        "    $2",
        "    return false;",
        "});",
    ],
    "description": ""
},

記事一覧へ

りょー｜29歳フリーランス｜LPコーディング、WordPressサイト構築、ディレクション、Shopify (Liquid編集) を中心に活動しております！

完全未経験からWEB業界に入り
デイトラで3ヶ月間学習
営業開始後4日→ゼロイチ達成
開業3ヶ月後→月収50万達成
その後平均月収50万 (最高月収120万円)

WEBで独立したい！未経験からでもフリーランスになりたい！そんな方々のためになるような情報をこのブログを通して発信します！

私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓

Products

Coming Soon

HP制作のご依頼

現在エンドクライアント様向けの事業サイトを作成中です。

WEB制作業務委託
のご依頼

LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！約1年間で80サイト以上作成をしてきました。LP制作最短2日で納品！
詳しくは、ポートフォリオをご覧ください。

コンテンツ

Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。

カートにアイテムが追加されました