Ryo Blog

〜WEB制作をスキルに〜

ヘッダーのサブメニューを実装しよう！

2023.11.09

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

headerのメニューをホバーしたら下にスライドで出てくるメニューの作り方
メニューのアイテムの下の余白をホバーした時にスライドメニューが消えてしまって困っている！という方へ向けた解説もしています。
おまけとして、headerの良く使う型もスニペット登録できるように載せておきました！

解説動画

コードの解説

HTMLの記述

<header class="header">
    <div class="header-wrap">
        <div class="header-logo"><a href="">ロゴ</a></div>
        <nav class="header-nav">
            <ul class="header-list">
                <li class="header-item">
                    <span>about</span>
                    <div class="header-sub-menu">
                        <ul class="header-sub-list">
                            <li class="header-sub-item"><a href="">about-sub-item</a></li>
                            <li class="header-sub-item"><a href="">about-sub-item</a></li>
                            <li class="header-sub-item"><a href="">about-sub-item</a></li>
                        </ul>
                    </div>
                </li>
                <li class="header-item">
                    <span>service</span>
                    <div class="header-sub-menu">
                        <ul class="header-sub-list">
                            <li class="header-sub-item"><a href="">service-sub-item</a></li>
                            <li class="header-sub-item"><a href="">service-sub-item</a></li>
                            <li class="header-sub-item"><a href="">service-sub-item</a></li>
                        </ul>
                    </div>
                </li>
                <li class="header-item"><a href="">works</a></li>
            </ul>
            <div class="header-btn">
                <a href="">contact</a>
            </div>
        </nav>
        <div class="drawer-icon pc_hidden">
            <span class="bar1"></span>
            <span class="bar2"></span>
            <span class="bar3"></span>
        </div>
    </div>
</header>

CSSの記述

$height-pc: 80px;
$height-sp: 60px;
$paddingSide-pc: 40px;
$paddingSide-sp: 20px;
$navGap: 20px;
$listGap: 20px;

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: $height-pc;
    padding: 0 $paddingSide-pc;
    background: rgba(192, 234, 255, 0.655);
}
.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: inherit;
}
.header-logo {}
.header-nav {
    display: flex;
    align-items: center;
    column-gap: $navGap;
    height: inherit;
}
.header-list {
    display: flex;
    align-items: center;
    column-gap: $listGap;
    height: inherit;
}
.header-btn {
    height: inherit;
}
.header-btn a {
    display: inline-block;
    padding: 0 20px;
    height: inherit;
    display: flex;
    align-items: center;
    background: rgb(254, 200, 100);
}
.header-item {
    height: inherit;
    a {
        height: inherit;
        display: flex;
        align-items: center;
    }
    span {
        height: inherit;
        display: flex;
        align-items: center;
        transition: all  0.3s ease;
        &.current {
            color: blue;
        }
    }
}
.header-sub-menu {
    display: none;
    background: rgb(81, 81, 239);
    padding: 20px;
    position: fixed;
    top: $height-pc;
    left: 0;
    width: 100%;
    height: auto;
}
.header-sub-item {
    a {
        color: white;
    }
}
.pc_hidden {
    display: none;
}

jQueryの記述

jQuery(function($){
    $('.header-item').on({
        'mouseenter': function() {
            //hover
            $(this).children('.header-sub-menu').slideDown(100);
            $(this).children('span').addClass('current');
        },
        'mouseleave': function() {
            //leave
            $(this).children('.header-sub-menu').slideUp(100);
            $(this).children('span').removeClass('current');
        }
    });
});

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

html.json

"header": {
    "prefix": "header",
    "body": [
        "<header class=\"header\">",
        "    <div class=\"header-wrap\">",
        "        <div class=\"header-logo\">",
        "            <a href=\"\">ロゴ</a>",
        "        </div>",
        "        <nav class=\"header-nav\">",
        "            <ul class=\"header-list\">",
        "                <li class=\"header-item\"><a href=\"\">about</a></li>",
        "                <li class=\"header-item\"><a href=\"\">service</a></li>",
        "                <li class=\"header-item\"><a href=\"\">works</a></li>",
        "            </ul>",
        "            <div class=\"header-btn\">",
        "                <a href=\"\">contact</a>",
        "            </div>",
        "        </nav>",
        "        <div class=\"drawer-icon pc_hidden\">",
        "            <span class=\"bar1\"></span>",
        "            <span class=\"bar2\"></span>",
        "            <span class=\"bar3\"></span>",
        "        </div>",
        "    </div>",
        "</header>",
    ],
    "description": ""
},


scss.json

"header": {
    "prefix": "header",
    "body": [
        "\\$height-pc: 80px;",
        "\\$height-sp: 60px;",
        "\\$paddingSide-pc: 40px;",
        "\\$paddingSide-sp: 20px;",
        "\\$navGap: 20px;",
        "\\$listGap: 20px;",
        "",
        ".header {",
        "    position: fixed;",
        "    top: 0;",
        "    left: 0;",
        "    width: 100%;",
        "    height: \\$height-pc;",
        "    padding: 0 \\$paddingSide-pc;",
        "}",
        "",
        ".header-wrap {",
        "    display: flex;",
        "    justify-content: space-between;",
        "    align-items: center;",
        "    height: inherit;",
        "}",
        "",
        ".header-logo {",
        "",
        "}",
        ".header-nav {",
        "    display: flex;",
        "    align-items: center;",
        "    column-gap: \\$navGap;",
        "}",
        "",
        ".header-list {",
        "    display: flex;",
        "    align-items: center;",
        "    column-gap: \\$listGap;",
        "}",
        "",
        ".pc_hidden {",
        "    display: none;",
        "}",
    ],
    "description": ""
},

javascript.json

"hover": {
    "prefix": "hover",
    "body": [
        "\\$('$1').on({",
        "    'mouseenter': function() {",
        "        //hover",
        "        $2",
        "    },",
        "    'mouseleave': function() {",
        "        //leave",
        "        $3",
        "    }",
        "});",
    ],
    "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裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。

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