ハンバーガーメニューを作ってみよう！

ゴール

こんな感じのハンバーガー作ります！

ハンバーガーメニューとは何か？

これらのサイトのように右上の棒線をクリックすると、
横や上からメニューが降りてくるような感じです！

参考例

POGG | スイートポテトパイ専門店
 ONTOMO -音楽って、いいなあを毎日に-

使用目的としては、スマートフォンなどの小さい画面では
多彩なメニューを表示すると煩雑に見えてしまうため、省スペース化を目的に使用されます。
また、デザイン的にシンプルに見せる目的でも使用されます。
ハンバーガーメニューとは｜デザインの種類・事例・2019年SEOなども絡めて解説

ハンバーガーの役立つとき

・レスポンシブ対応する時
(レスポンシブってなんでしょう！？)

解答

PCなのかスマホなのか、Webサイトを利用する機器によってディスプレイの大きさが変わるため、どんな画面サイズでもわかりやすい画面表示が必要です。このように効率的に「切り替え」をする考え方や具体時な手法を、レスポンシブWebデザインといいます。

作り方の概要

至ってシンプル！
①jsでクラスのつけ外し
②CSSでクラスがある前と後で差異のあるCSSを定義する

そもそもjsって何？

javascriptはもともとはNetscape社の開発したLiveScriptという言語だった！
そのLiveScriptはコンテンツ（画像や文章などの静的コンテンツ）を動的に扱うためのスクリプト言語。
そして、その後、Netscape社がJavaを開発していたサン・マイクロシステムズと業務提携をしてjavascriptと命名されたんだね
【javascript】超入門

実際に作ってみよう！

デスクトップにディレクトリを作成していただいて以下のファイルをそれぞれ作成してください！

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8"> 
        <title>Hamberger_patern2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
        <link rel="stylesheet" href="./index.css">
    </head>
    <body>
        <i class="fa fa-bars" id="show"></i> <!-- メニューを開くときのアイコン -->

        <!-- コンテンツ部分 -->
        <h1>Hello</h1>
        <p>
            Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello.
             world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. 
            world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.Hello. world.
        </p>
        <!-- コンテンツ部分 -->

        <!-- メニューが開いているときに暗くする -->
        <div id="cover"></div>
        <!-- メニューが開いているときに暗くする -->

        <!-- メニューの定義 -->
        <div id="menu">
            <i class="fas fa-times" id="hide"></i>　<!-- メニューを閉じるときのアイコン -->
            <ul>
                <li>Menu</li>
                <li>Menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
            </ul>
        </div>
        <!-- メニューの定義 -->

        <script>
            (function(){
                'use strict';

                // showっていう名前がついてる要素を取得してshowっていう変数に入れる
                var show = document.getElementById('show');


                var cover = document.getElementById('cover');


                var hide = document.getElementById('hide');

                //ここ
                //showをクリックしたらbodyのクラス名にmenu-openを追加する
                show.addEventListener('click' , function(){
                    document.body.className = 'menu-open';
                });

                cover.addEventListener('click' , function(){
                    document.body.className = '';
                });
   
                //showを再度クリックしたらbodyのクラス名を削除する
                hide.addEventListener('click', function(){
                    document.body.className = '';
                });
            })();
        </script>
    </body>
</html>

index.css

/* メニュー自体の定義 */
/* 何もクリックしていないときのメニューのCSS */
# menu{
    position: fixed;
    top: 0;
    right: -50%;
    color: #fff;
    background: #4c81e9;
    padding: 8px;
    box-sizing: border-box;
    width: 50%;
    min-height: 100%;
    z-index: 2; /* QUIZ! z-indexとは */
    transition: .4s;
}
/* メニュー自体の定義 */
/* .を連結させる */
body.menu-open #menu{
    right: 0%;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

body{
    padding:0;
    margin: 0;
    font-family: Verdana, sans-serif;z-index: 1;
    background: #eee; 
    color: #333;
    padding: 8px;
    box-sizing:border-box;
    width: 100%;
    height: 100%; 
    overflow-x: hidden;
}

/* ハンバーガーメニューと❌印の位置定義 */
# show , #hide{
    position: absolute; /* QUIZ! position:absoluteとは！ */
    top: 11px;
    right: 11px;
}
/* ハンバーガーメニューと❌印の位置定義 */

/* メニューを開いているときに、メニュー以外を暗くする */
# cover{
    background: #000; 
    opacity: 0.6;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* QUIZ! z-indexとは */
    display: none; /* 通常時では非表示にする */
}
body.menu-open #cover {
    display: block; /* メニューが開いているときには、表示する */
}
/* メニューを開いているときに、メニュー以外を暗くする */

以上です！！
上ではfont-awesomeを使って、
ハンバーガーメニューアイコンと、❌アイコンを作成しております！
font-awesomeとは

ステップ

まず、jsでメニューアイコンをクリックしたときにbodyタグにmenu-openというクラスをつけ、
再度クリックしたときに、bodyタグのmenu-openというクラスを外す、という定義をしてます！

クリックされたらmenu-openをつける

showというidをハンバーガーアイコンに定義してます

index.html

// showっていう名前がついてる要素を取得してshowっていう変数に入れる
var show = document.getElementById('show');

//showをクリックしたらbodyのクラス名にmenu-openを追加する
show.addEventListener('click' , function(){
  document.body.className = 'menu-open';
});

再度クリックされたらmenu-openを外す

hideというidを❌アイコンに定義してます

index.html

var hide = document.getElementById('hide');

hide.addEventListener('click', function(){
    document.body.className = '';
});

そして、menu-openというクラスがbodyについていないときのメニューのCSSを定義します！

index.css

/* メニュー自体の定義 */
/* 何もクリックしていないときのメニューのCSS */
# menu{
    position: fixed;
    top: 0;
    right: -50%;
    color: #fff;
    background: #4c81e9;
    padding: 8px;
    box-sizing: border-box;
    width: 50%;
    min-height: 100%;
    z-index: 2; /* QUIZ! z-indexとは */
    transition: .4s;
}
/* メニュー自体の定義 */

加えて、menu-openというクラスがbodyについているときのメニューのCSSを定義します！

index.css

body.menu-open #menu{
    right: 0%;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

もともと、メニューの幅が50%なので、menu-openというクラスがbodyについていないときのメニューのCSSで

index.css

# menu {
    right: -50%;
    width: 50%;
}

とすることで、デフォルトのメニューの位置が画面外の右側に位置するようになります！
そして、menu-openというクラスがbodyについていないときのメニューのCSSを以下のようにすることで

index.css

body.menu-open #menu{
    right: 0%;
}

画面の右側にあったメニューが、ハンバーガーアイコンがクリックされたときに、にゅ〜っと画面に現れるようになります

以上が、ハンバーガーメニューの作りかたの概要です！

完璧や！って方は、メニューを開いたときに、画面が暗くなった部分をクリックした時も、メニューが閉じられる理由を考えてみましょう！

参考

【入門】レスポンシブWebデザインとは？概要と作り方を丁寧解説