2024/01/18 (更新日: 2024/01/25)

コピペでOK！基本的なハンバーガーメニュー

未分類

ハンバーガーメニューについて調べてるけど、結局なにをどう使えばいいかよくわからないんだ。

というヒトのために、「これをコピペするだけでOK！」なカタチでコードをまとめました。

記事の後半では詳しい使い方を説明するので、気になるヒトは最後までお読みください

本日の記事

• コピペでOK！基本的なハンバーガーメニュー
• ハンバーガーメニューをファイル分け

コピペでOK！基本的なハンバーガーメニュー

<style>
    .header {
    position: fixed;
    width: 100%;
    z-index: 100;
}

.header__inner {
    /* max-width: 1440px; */
    max-width: 1220px;
    margin: 17px auto;
    padding-right: 40px;
    padding-left: 40px;
    /* position: relative; */
    display: flex;
}

.header__logo {
    width: 161px;
    height: 46px;
    /* flex-shrink: 0; */
    /* position: absolute;
    left: 10.5%;
    top: 5px; */
}

.header__menu-area {
    /* width: 513px; */
    display: flex;
    margin-left: auto;
    /* justify-content: space-between; */
    /* position: absolute;
    left: 54%; */
    /* right: 10%; */
}

.header__menu {
    margin-top: 5px;
}

.header__menu_list {
    display: flex;
    border-radius: 30px;
    background: #FFF;
    white-space: nowrap;
    padding: .65em 1em;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}

.header__menu_link {
    color: #283436;
    font-family: Noto Sans JP;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.8px;
    padding: 8px;
}

/* --------------- */
/* 「ご利用ガイド」タッチで出てくるカーソル */
.has-child {
    position: relative;
}
.has-child__list {
    display: none;
}
.has-child:hover .has-child__list,
.has-child:hover .has-child__list,
.has-child:active .has-child__list,
.has-child:active .has-child__list{
    display: block;
    position: absolute;
    background: #fff;
    margin-top: 4px;
    width: 343px;
    padding: 7px 0 12px 23px;
    line-height: 25px;
}

.header__reception {
    margin-left: 7px;
}

.reception__button {
    border-radius: 40px;
    background: #EDD837;
    box-shadow: 0px 3px 0px 0px #C0AF2C;
    text-align: center;
    line-height: 1em;
    transition: all 0.3s;
}

.reception__button_link {
    display: block;
    padding: 0.63em 1em;
    text-decoration: none;
    font-size:clamp(10px, 0.293rem + 0.58vw, 13px);
    font-weight: bold;
    line-height: 130%;
    color: #283436;
    white-space: nowrap;
}

.reception__button:hover {
    transform: translate(5px, 5px);
}

.headerSP__inner {
    display: none;
}

@media screen and (max-width: 950px) {
    .header__inner {
        display: none;
    }

    .headerSP__inner {
        display: block;
        position: relative;
    }
    .header__logo{
        padding-top: 18px;
        padding-left: 12px;
    }

    #g-nav {
        position: fixed;
        z-index: 999;
        top:0;
        left: -120%;
        width:100%;
        height: 100vh;
        background: linear-gradient(180deg, #40E0D0 0%, #5DC1CF 100%);
        transition: all 0.6s;
    }

    #g-nav.panelactive{
        left: 0;
    }

    #g-nav li{
        list-style: none;
        text-align: left;
    }
        
    .openbtn{
        position:fixed;
        z-index: 9999;
        top:10px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height:50px;
    }

    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #000;
        width: 28.5px;
    }

    .openbtn span:nth-of-type(1) {
        top: 15px;
    }
    .openbtn span:nth-of-type(2) {
        top: 23px;
    }
    .openbtn span:nth-of-type(3) {
        top: 31px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 23px;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 23px;
    }


    .header__menu_nav {
        position: fixed;
        z-index: 999;
        top: 0;
        left: -120%;
        width: 100%;
        height: 100vh;
        background: linear-gradient(180deg, #40E0D0 0%, #5DC1CF 100%);
        transition: all .6s;
    }
    
    .header__menu-area.panelactive {
        left: 0;
        background: blue;
    }

    .header__menu_list {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        background: none;
        box-shadow: none;
        padding: 0;
        gap: 8px;
    }
    .header__menu_title--mb{
        margin-bottom: 12px;
    }

    .header__menu_title {
        color: #283436;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
        letter-spacing: 0.8px;
        text-indent: 1em;
        position: relative;
    }

    .header__menu_title::before,
    .header__menu_title::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        vertical-align: middle;
    }

    .header__menu_title::before {
        content: "";
        box-sizing: border-box;
        width: 12px;
        height: 12px;
        border: 1px solid #fff;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    .header__menu_title::after {
        content: "";
        left: 3.5px;
        width: 4px;
        height: 4px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .header__menu_item {
        color: #283436;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 24px */
        letter-spacing: 0.8px;
    }

    .header__menu_link {
    }
    
    .header__menu_guidelink {
        text-decoration: none;
        color: #283436;
    }
}

</style>

<header class="header">
        <div class="header__inner">
        <div class="header__logo">
            <a href="/">
                <img src="." alt="ロゴ">
            </a>
        </div>
        <div class="header__menu-area">
            <div class="header__menu">
                <nav class="header__menu_nav">
                    <ul class="header__menu_list">
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_item has-child"><a href="">テキスト</a></li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                    </ul>
                </nav>
            </div>
        </div><!--header__menu-area-->
    </div><!--header__inner-->

    <div class="headerSP__inner">
        <div class="header__logo">
            <a href="/">
                <img src="" alt="ロゴ">
            </a>
        </div>
        <div class="header__menu-area">
            <div class="header__menu">
                <div class="openbtn">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                <nav id="g-nav" class="header__menu_nav">
                    <ul class="header__menu_list">
                        <li class="header__menu_title">テキスト</li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_title header__menu_title--mb"><a href="">テキスト</a></li>                        
                        <li class="header__menu_title">テキスト</li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                        <li class="header__menu_item"><a href=""">テキスト</a></li>
                        <li class="header__menu_item"><a href="">テキスト</a></li>
                    </ul>
                </nav>
            </div>
        </div><!--header__menu-area-->
    </div>
</header>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
        $(".openbtn").click(function () {
            $(this).toggleClass('active');
                $("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
            });

            $("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
                $(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
                $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
            });
    </script>

ハンバーガーメニューをファイル分け

ここからは初学者向けになります。中級者以上の方は上記のコードをコピペして活用してください。

ーーーーーーーーーーーーーーーー

さて、上記のコードをコピペするだけで、ヘッダーとハンバーガーメニューは出来上がります。

しかしこのままだとコードがキレイとはいえないので、言語ごとにファイルを分けていきましょう。

３つのファイルに分かれます

上記のコードは３つのファイルに分けられます。

• HTML
• CSS
• JavaScript

これらをそれぞれ分けていきましょう。

CSS

コードの上から順番に処理していきます。

なのでまずはCSSから。

<style>
    .header {
    position: fixed;
    width: 100%;
    z-index: 100;
}

.header__inner {
    /* max-width: 1440px; */
    max-width: 1220px;
    margin: 17px auto;
    padding-right: 40px;
    padding-left: 40px;
    /* position: relative; */
    display: flex;
}

.header__logo {
    width: 161px;
    height: 46px;
    /* flex-shrink: 0; */
    /* position: absolute;
    left: 10.5%;
    top: 5px; */
}

.header__menu-area {
    /* width: 513px; */
    display: flex;
    margin-left: auto;
    /* justify-content: space-between; */
    /* position: absolute;
    left: 54%; */
    /* right: 10%; */
}

.header__menu {
    margin-top: 5px;
}

.header__menu_list {
    display: flex;
    border-radius: 30px;
    background: #FFF;
    white-space: nowrap;
    padding: .65em 1em;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}

.header__menu_link {
    color: #283436;
    font-family: Noto Sans JP;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.8px;
    padding: 8px;
}

/* --------------- */
/* 「ご利用ガイド」タッチで出てくるカーソル */
.has-child {
    position: relative;
}
.has-child__list {
    display: none;
}
.has-child:hover .has-child__list,
.has-child:hover .has-child__list,
.has-child:active .has-child__list,
.has-child:active .has-child__list{
    display: block;
    position: absolute;
    background: #fff;
    margin-top: 4px;
    width: 343px;
    padding: 7px 0 12px 23px;
    line-height: 25px;
}

.header__reception {
    margin-left: 7px;
}

.reception__button {
    border-radius: 40px;
    background: #EDD837;
    box-shadow: 0px 3px 0px 0px #C0AF2C;
    text-align: center;
    line-height: 1em;
    transition: all 0.3s;
}

.reception__button_link {
    display: block;
    padding: 0.63em 1em;
    text-decoration: none;
    font-size:clamp(10px, 0.293rem + 0.58vw, 13px);
    font-weight: bold;
    line-height: 130%;
    color: #283436;
    white-space: nowrap;
}

.reception__button:hover {
    transform: translate(5px, 5px);
}

.headerSP__inner {
    display: none;
}

@media screen and (max-width: 950px) {
    .header__inner {
        display: none;
    }

    .headerSP__inner {
        display: block;
        position: relative;
    }
    .header__logo{
        padding-top: 18px;
        padding-left: 12px;
    }

    #g-nav {
        position: fixed;
        z-index: 999;
        top:0;
        left: -120%;
        width:100%;
        height: 100vh;
        background: linear-gradient(180deg, #40E0D0 0%, #5DC1CF 100%);
        transition: all 0.6s;
    }

    #g-nav.panelactive{
        left: 0;
    }

    #g-nav li{
        list-style: none;
        text-align: left;
    }
        
    .openbtn{
        position:fixed;
        z-index: 9999;
        top:10px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height:50px;
    }

    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #000;
        width: 28.5px;
    }

    .openbtn span:nth-of-type(1) {
        top: 15px;
    }
    .openbtn span:nth-of-type(2) {
        top: 23px;
    }
    .openbtn span:nth-of-type(3) {
        top: 31px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 23px;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 23px;
    }


    .header__menu_nav {
        position: fixed;
        z-index: 999;
        top: 0;
        left: -120%;
        width: 100%;
        height: 100vh;
        background: linear-gradient(180deg, #40E0D0 0%, #5DC1CF 100%);
        transition: all .6s;
    }
    
    .header__menu-area.panelactive {
        left: 0;
        background: blue;
    }

    .header__menu_list {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        background: none;
        box-shadow: none;
        padding: 0;
        gap: 8px;
    }
    .header__menu_title--mb{
        margin-bottom: 12px;
    }

    .header__menu_title {
        color: #283436;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
        letter-spacing: 0.8px;
        text-indent: 1em;
        position: relative;
    }

    .header__menu_title::before,
    .header__menu_title::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        vertical-align: middle;
    }

    .header__menu_title::before {
        content: "";
        box-sizing: border-box;
        width: 12px;
        height: 12px;
        border: 1px solid #fff;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    .header__menu_title::after {
        content: "";
        left: 3.5px;
        width: 4px;
        height: 4px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .header__menu_item {
        color: #283436;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 24px */
        letter-spacing: 0.8px;
    }

    .header__menu_link {
    }
    
    .header__menu_guidelink {
        text-decoration: none;
        color: #283436;
    }
}

</style>

このコードの、
一番上にある<style>
と、
一番下にある</style>
までがCSSになります。

なので、<style>と/style>に挟まれてる中身をCSSファイルをつくってコピペして、
<style>と/style>は削除します。

HTMLはそのまま

次のパートはそのままです。

なぜならHTMLコードの中に、HTMLを書いているので、何もする理由がないからですね。

JavaScript

基本的に</footer>の下に書かれることが多いので、まぁ移動させなくても問題ないです。

一般的によく見かけるのは、

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

↑はそのままフッターの閉じタグ</footer>の下に。

 <script>
        $(".openbtn").click(function () {
            $(this).toggleClass('active');
                $("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
            });

            $("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
                $(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
                $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
            });
    </script>

↑をjsファイルに移動させます。
CSSとやり方は同じで、<script>と</script>の中身を移動させます。
<script>と</script>は消しちゃってOKです。

コピペでできるハンバーガメニュー、完成です！

最後までお読みいただき、ありがとうございました。

• Tweet