ホームページを作ろう！- Hamburger menu

参考サイト。

ハンバーガーメニューをHTML+CSS+jsで作る方法【初心者向け】 | できる大人のパソコン教室ハンバーガーメニューをHTML+CSS+jsで作る方法【初心者向け】

HTMLとCSSとJavaScriptで作るハンバーガーメニュー

メディアクエリをつかてブラウザの幅が縮まれんばハンバーガーメニューが出るようにしたもの。

ハンバーガーメニューはGoogleフォントを使ってレイアウトしています。

HTMLとCSSとJavaScriptで作るハンバーガーメニュー。

ハンバーガーメニューを含め、全部をHTMLとCSSでレイアウトを組み上げています。

ハンバーガーメニューの項目は以下のリスト項目としまう。

        <nav>
            <div class="inner">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">menu-1</a></li>
                    <li><a href="">menu-2</a></li>  
                </ul>
            </div>

        </nav>

ハンバーガーメニューは

        <div class="toggle-btn">

            <span></span>
            <span></span>
            <span></span>

        </div>

となっていて、spanにCSSを当ててデザインしていきます。

   .toggle-btn{
            display: block;
            position: fixed;
            top: 30px;
            right: 30px;
            width: 30px;
            height: 30px;
            z-index: 3;
            cursor: pointer;
   }

ボタンの位置、大きさを決めます。

.toggle-btn span{
            position: absolute;
            display: block;
            left: 0;
            width: 30px;
            height: 2px;
            background-color: #333;
            transition: all 0.5s;
            border-radius: 4px;
}

作ったボックスの中に線を引いて

.toggle-btn span:nth-child(1){
            top: 4px;
}

.toggle-btn span:nth-child(2){
            top: 14px;
}

.toggle-btn span:nth-child(3){
            bottom: 4px;
}

3本の線をずらすと出来上がりです。

あとはこれらにアクションを加えていきます。ボタンを押せば出て来るアクションを作ります。

最終系は

CSS

  <div class="toggle-btn">
            <span></span>
            <span></span>
            <span></span>
 </div>

三本線のボタンを押すと

 #mask {

            display: none;
            transition: all 0.5s;
        }

 .open #mask {
            display: block;
            background-color: black;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            opacity: 0.8;
            cursor: pointer;
  }

マスクが適応され、

   .open .toggle-btn span:nth-child(1) {
            transform: translateY(10px) rotate(-315deg);
        }
        .open .toggle-btn span:nth-child(2) {
            opacity: 0;
        }
        .open .toggle-btn span:nth-child(3) {
            transform: translateY(-10px) rotate(315deg);
        }

三本線のボタンも2本線のバッテンに変化させます。そして

    nav {
            display: block;
            position: fixed;
            width: 220px;
            background-color: #ffffff;
            top: 0;
            left: -300px;
            bottom: 0;
            transition: all 0.5;
            z-index: 3;
            opacity: 0;
        }

        .open nav {
            left: 0;
            opacity: 1;
        }

left: -300px;
opacity: 0;

と隠していたナビを

left: 0;
opacity: 1;

として出現させます。

JavaScriptは以下。

    <script>
        let nav = document.querySelector("#navArea");
        let btn = document.querySelector(".toggle-btn");
        let mask = document.querySelector("#mask");

        btn.onclick = () => {
            nav.classList.toggle("open");
        }

        mask.onclick = () => {
            nav.classList.toggle("open");
        }

    </script>