ハンバーガーメニューを作ってみた【jQuery】
こんにちは。
大学の期末テストやレポートが落ち着いて、やっとコーディングできます!
今回は、レスポンシブデザインにおいて必須と言っても過言ではない「ハンバーガーメニュー」を作っていきたいと思います!
こちらの記事を参考にさせてもらいました。
ハンバーガーメニュー(ドロワーメニュー)の作り方 | KUBOGEN
完成品
See the Pen
by sk (@sk232423)
on CodePen.
ソースコード
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"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <header> <div class="hamburger_and_logo"> <div class="hamburger"> <span></span><!--ハンバーガーの棒たち--> <span></span><!--ハンバーガーの棒たち--> <span></span><!--ハンバーガーの棒たち--> </div> <img src="https://cdn.pixabay.com/photo/2017/11/10/05/05/youtube-2935416_1280.png" alt="" style="height:50px"><!--ヘッダーのロゴ--> </div> <nav class="menu"><!--横からでてくるメニュー--> <div class="menu_bottom_border"><!--線引くためのクラス--> <div class="menu-hamburger"><!--横からでてくるハンバーガー--> <span></span><!--横からでてくるハンバーガーの棒たち--> <span></span><!--横からでてくるハンバーガーの棒たち--> <span></span><!--横からでてくるハンバーガーの棒たち--> </div> <img src="https://cdn.pixabay.com/photo/2017/11/10/05/05/youtube-2935416_1280.png" alt="" style="height:50px"><!--ヘッダーのロゴ--> </div> <ul class="menu-content"><!--横からでてくるメニューの内容--> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> </nav> <div class="menu-background"></div><!--ハンバーガー押されたら、背景をグレーにする--> </header> <p>テスト</p> </body> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script> //toggleは表示していたら非表示に、非表示の場合は表示にしてくれる!!! $(function(){ $('.hamburger').click(function(){ $('.menu').toggleClass('open'); $('.menu-background').toggleClass('menu-background2'); }); $('.menu-hamburger').click(function(){ $('.menu').toggleClass('open'); $('.menu-background').toggleClass('menu-background2'); }); $('.menu-background').click(function(){ $('.menu').toggleClass('open'); $('.menu-background').toggleClass('menu-background2'); }); }); </script> </html>
body { margin: 0; background-color:rgb(248, 248, 248); } /*----------------------------ハンバーガーメニュー----------------------------*/ header{ height:50px; position: relative; background-color: white; } .hamburger_and_logo{ display: flex; } .hamburger { width: 30px; height: 30px; padding: 10px; display: flex; justify-content: center; align-items: center; z-index: 1; } .hamburger:hover { cursor: pointer; } .hamburger span { background: black; width: 20px; height: 2px; position: absolute; } .hamburger span:nth-of-type(1) { top: 19px; } .hamburger span:nth-of-type(3) { bottom: 19px; } /*---------------------メニュー-----------------------*/ .menu { z-index:3; width: 300px; height: 100vh; background-color: white; color: black; position: absolute; top:0; transform: translate(-300px); transition: 0.3s ease-out; } .menu_bottom_border{ display: flex; height:50px; border-bottom: 1px solid rgb(225, 225, 225); } .menu-hamburger{ width: 30px; height: 30px; padding: 10px; position:relative; display: flex; justify-content: center; align-items: center; } .menu-hamburger:hover { cursor: pointer; } .menu-hamburger span { background: black; width: 20px; height: 2px; position: absolute; } .menu-hamburger span:nth-of-type(1) { top: 19px; } .menu-hamburger span:nth-of-type(3) { bottom: 19px; } .menu-content{ margin-top: 50px; } li { margin-bottom: 10px; } /*----------------------メニューにopenクラスがついたときのスタイル------------------------*/ .menu.open { transform: translate(0); transition: 0.3s ease-out; } /*--------------背景を黒くする、押したらメニューを閉じる--------------------*/ .menu-background { position: fixed; top: 0; left: 0; content: ""; display: block; width: 0; height: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; opacity: 0; /* 透明度を0にすることで隠す */ transition: opacity 0.3s; /* 透明度の0→1になる速度 */ } .menu-background2{ width: 100%; height: 100%; opacity: 1; /* メニューが表示されているときには背景が表示 */ }