見出し画像

【 WEBデザイン 】 コードハッピーセット　「ハンバーガーメニュー」　FIREへの旅路 ♯491

S.A.P.Studio

WEBサイトのデザイン、コーディングで頻出の機能のコードを、
HTML、CSS(SCSS) 、JavaScriptをセットでまとめていきます。

今回は、「ハンバーバーガーメニュ」です。


【 ハンバーガーメニュ 】

↓OPEN↓


上から降りてくる



＜HTML＞

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ハンガーバーメニュ</title>

    <!-- reset.css destyle ブラウザstyleのリセット-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />

    <!-- css -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.js"
        integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>



</head>

<body>
    <!-- メニュボタン -->
    <div class="openbtn">
        <span></span>
        <span></span>
        <span></span>
    </div>



    <!-- メニュ内部 -->
    <div class="hamburger-menu">
        <nav>
            <ul>
                <li><a href="#">top</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">company</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </div>




</body>
</html>

<span>タグが並んでいるのが、メニュのバーの部分です。
CSSでこの<span>タグに対して、heightで高さを出して、background-colorで色を付けることで、バーの見た目ができています。


＜SCSS＞

//ハンバーガーメニュボタン
.openbtn {
    z-index: 999;
    width: 50px;
    height: 50px;
    background-color: rgb(0, 153, 255);
    position: relative;
    cursor: pointer;

    span {
        width: 30px;
        height: 4px;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        position: relative;
        left: 8px;
        transition: all 0.4s;

        &:nth-child(1) {
            position: absolute;
            top: 12px;
        }

        &:nth-child(2) {
            position: absolute;
            top: 22px;
        }

        &:nth-child(3) {
            position: absolute;
            top: 32px;
        }
    }
}

//ハンバーガーメニュボタン クリックしたactive付与時
.openbtn.active {
    z-index: 999;

    span {
        width: 30px;
        height: 4px;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        position: relative;
        left: 8px;
        transition: all 0.4s;

        &:nth-child(1) {
            position: absolute;
            top: 22px;
            transform: rotate(45deg);
        }

        &:nth-child(2) {
            opacity: 0;
        }

        &:nth-child(3) {
            position: absolute;
            top: 22px;
            transform: rotate(-45deg);
        }
    }
}
// ハンバーガーメニュボタン

//ハンバーガーメニュ内部
.hamburger-menu {
    position: absolute;
    top: -100%; //topから
    //left: -100%; //leftから top:0% とセット使用
    //right: -100%; //rightから top:0% とセット使用
    transition: .6s;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.8);

    nav {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: rotate(-50%,-50%);

        li {
            color: white;
        }
    }


}

.hamburger-menu.open {
    position: absolute;
    top: 0;
    //left: 0; //leftから top:0とセット使用
    //right: 0; //rightから top:0とセット使用
    transition: .6s;


}

.openbtnは、.activeがついているときと、ついていないときのstyleがあります。
.activeはjQueryでユーザーがクリックした時にclassが付与されるようにします。

.hamburger-menuも同様です。
ユーザーがクリックしたら、.openが付与されます。




＜コンパイル後CSS＞

上記のSCSSのコンパイル後のCSSです。
SCSSを使っていない場合は、こちらをコピペで使えます。

.openbtn {
  z-index: 999;
  width: 50px;
  height: 50px;
  background-color: #0099ff;
  position: relative;
  cursor: pointer;
}

.openbtn span {
  width: 30px;
  height: 4px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  left: 8px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.openbtn span:nth-child(1) {
  position: absolute;
  top: 12px;
}

.openbtn span:nth-child(2) {
  position: absolute;
  top: 22px;
}

.openbtn span:nth-child(3) {
  position: absolute;
  top: 32px;
}

.openbtn.active {
  z-index: 999;
}

.openbtn.active span {
  width: 30px;
  height: 4px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  left: 8px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.openbtn.active span:nth-child(1) {
  position: absolute;
  top: 22px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.openbtn.active span:nth-child(2) {
  opacity: 0;
}

.openbtn.active span:nth-child(3) {
  position: absolute;
  top: 22px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.hamburger-menu {
  position: absolute;
  top: -100%;
  -webkit-transition: .6s;
  transition: .6s;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.hamburger-menu nav {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: rotate(-50%, -50%);
          transform: rotate(-50%, -50%);
}

.hamburger-menu nav li {
  color: white;
}

.hamburger-menu.open {
  position: absolute;
  top: 0;
  -webkit-transition: .6s;
  transition: .6s;
}
/*# sourceMappingURL=style.css.map */




＜JavaScript ( jQuery ) ＞

   <script>


        $(".openbtn").click(function () {
            $(this).toggleClass('active');
            $(".hamburger-menu").toggleClass('open');
        });



    </script>

.openbtnが、メニューバーのclassです。
クリックした時に、これ(this)に、classを付けたり外したり(toggle)する。
そのclass名はactiveです。

.hamburger-menuは、ハンバーガーメニュの内部をマークアップしたclassです。
.openbtnがクリックされたときに、
.hamburger-menuというclass名がついた要素に、
classを付けたり外したり(toggle)する。
そのclass名はopenです。

この処理で、CSSの
.openbtn.activeの時の、styleが適用されます。
.hamburger-menu.openの時の、styleが適用されます。



【 まとめ 】

ハンバーガーメニュのコードをまとめました。

ハンバーガーメニュの位置や、バーの形状などstyleを工夫して、デザイン通りにカスタマイズしましょう。


この記事が気に入ったらサポートをしてみませんか？