実行したいこと
レスポンシブにしてメニューボタンをクリックし、バツになった時にメニューを閉じたいのですが閉じられません。
コードは以下のサイトを参考にしています。
最近jsやjQを勉強し始めた初心者です。
単純な質問で恐れ入りますが、以下のコードをどう書いたら実行されるのかお手上げ状態になりました。どなたかご教示いただけましたら幸いです。
よろしくお願いいたします。
参考にしたサイト様
モーダルの動き
https://haniwaman.com/responsive-menu/#i-9
メニューサンプル(2番目のボタンです)
https://125naroom.com/web/2958
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>ハンバーガーメニュー</title> 8<link rel="stylesheet" href="css/reset.css"> 9<link rel="stylesheet" href="css/layout03.css"> 10</head> 11 12<body> 13 <div class="icon-hamburger"><span></span></div> 14 <div class="btn-trigger" id="btn02"> 15 <span></span> 16 <span></span> 17 <span></span> 18 </div> 19 20 <nav class="menu-container"> 21 <ul class="menu"> 22 <li class="menu-item"><a href="#">ホーム</a></li> 23 <li class="menu-item"><a href="#">ページ A</a></li> 24 <li class="menu-item"><a href="#">ページ B</a></li> 25 <li class="menu-item"><a href="#">ページ C</a></li> 26 <li class="menu-item"><a href="#">ページ D</a></li> 27 <li class="menu-item"><a href="#">ページ E</a></li> 28 </ul> 29 </nav> 30<script src="js/jquery-1.12.4.min.js"></script> 31<script src="js/index03.js"></script> 32</body> 33</html>
css
1/*PC版メニューのデザイン*/ 2.menu-container { margin: 0; } 3.menu-container .menu { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; } 4.menu-container .menu .menu-item { flex: 1; } 5.menu-container .menu .menu-item a { border-right: 1px solid #ccc; color: #333; display: block; padding: 0.6em 0.4em; text-align: center; text-decoration: none; } 6.menu-container .menu .menu-item a:hover { background: #ccc; color: #ffffff; } 7.menu-container .menu .menu-item:last-child a { border-right: none; } 8 9#modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; } 10 11@media screen and (max-width: 768px) { 12 /*ハンバーガーアイコン*/ 13 .btn-trigger { position: relative; border: 1px solid #ccc; width: 50px; height: 50px; cursor: pointer; margin: 10px 0 0 10px; z-index: 10; } 14 .btn-trigger span { position: absolute; width: 30px; height: 2px; background-color: #ccc; border-radius: 4px; cursor: pointer; left: 18%; } 15 .btn-trigger, .btn-trigger span { display: inline-block; transition: all .5s; box-sizing: border-box } 16 .btn-trigger span:nth-of-type(1) { top: 28%; } 17 .btn-trigger span:nth-of-type(2) { top: 50%; } 18 .btn-trigger span:nth-of-type(3) { bottom: 25%; } 19 20 /*閉じるアイコン*/ 21 .btn-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); } 22 .btn-trigger.active span:nth-of-type(2) { opacity: 0; } 23 .btn-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); } 24 25 /*メニューの中身*/ 26 .menu-container .menu { -webkit-transform: translate(-50%, -50%); display: none; height: auto; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 100; } 27 .menu-container .menu .menu-item a { color:#fff; border-right: none; } 28 .menu-container .menu .menu-item a:hover { background: none; color: #ccc; } 29 .menu-container .menu .menu-item:last-child a { border-bottom: none; } 30} 31
js
1$(function(){ 2 $('.btn-trigger').on('click', function() { 3 $('body').append('<div id="modal-overlay"></div>'); 4 $('#modal-overlay').fadeIn('1500'); 5 $('.menu-container .menu').fadeIn('1500'); 6 $(this).toggleClass('active'); 7 }); 8});
追記__コメント欄記載の現象【1】【2】発生後の検証コードです(2020'06'09追記)
【現象2】に関しては、メディアクエリ内の/メニューの中身/<.menu-container .menu>のdisplayをblockに変更し、画面幅に併せて表示/非表示になりましたが、そうすることにより、レスポンシブ化した際のメニューが表示されたままになります。(当然ですよね・・・・)
そこで、<.menu-container .menu.close>を作成し、透明0/ボタンを押せなくしてjsに当てるといけるかも?と思い、試してみましたが、書き方がよろしくないのか思うようにいきません。
コードは以下です。ご検証のほどよろしくお願い申し上げます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<title>ハンバーガーメニュー</title> 8<link rel="stylesheet" href="css/reset.css"> 9<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 10<style> 11/*PC版メニューのデザイン*/ 12body { background-color: #e9967a; } 13.menu-container { margin: 0; } 14.menu-container .menu { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; } 15.menu-container .menu .menu-item { flex: 1; } 16.menu-container .menu .menu-item a { border-right: 1px solid #ccc; color: #333; display: block; padding: 0.6em 0.4em; text-align: center; text-decoration: none; } 17.menu-container .menu .menu-item a:hover { background: #ccc; color: #ffffff; } 18.menu-container .menu .menu-item:last-child a { border-right: none; } 19 20 21@media screen and (max-width: 768px) { 22 /*ハンバーガーアイコン*/ 23 .btn-trigger { position: relative; border: 1px solid #ccc; width: 50px; height: 50px; cursor: pointer; margin: 10px 0 0 10px; z-index: 10; } 24 .btn-trigger span { position: absolute; width: 30px; height: 2px; background-color: #ccc; border-radius: 4px; cursor: pointer; left: 18%; } 25 .btn-trigger, .btn-trigger span { display: inline-block; transition: all .5s; box-sizing: border-box } 26 .btn-trigger span:nth-of-type(1) { top: 28%; } 27 .btn-trigger span:nth-of-type(2) { top: 50%; } 28 .btn-trigger span:nth-of-type(3) { bottom: 25%; } 29 30 /*閉じるアイコン*/ 31 .btn-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); } 32 .btn-trigger.active span:nth-of-type(2) { opacity: 0; } 33 .btn-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); } 34 35 /*メニューの中身*/ 36 .menu-container .menu { -webkit-transform: translate(-50%, -50%); display: block;/*noneから変更してみました*/ height: auto; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 100; } 37 .menu-container .menu .menu-item a { color:#fff; border-right: none; } 38 .menu-container .menu .menu-item a:hover { background: none; color: #ccc; } 39 .menu-container .menu .menu-item:last-child a { border-bottom: none; } 40 41 /*オーバーレイ →こちらに移動しました*/ 42 .modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; } 43 44 .menu-container .menu.close { opacity: 0; visibility: hidden; } /*追記してみました*/ 45 46} 47</style> 48<script> 49 $(function(){ 50 $('.btn-trigger').on('click', function() { 51 if ($('header').hasClass('modal-overlay') == false) { 52 $('header').addClass('modal-overlay'); 53 $('header').fadeIn('1500'); 54 $('.menu-container .menu').fadeIn('1500'); 55 $(this).toggleClass('active'); 56 } else { 57 $('header').removeClass('modal-overlay'); 58 $(this).toggleClass('active'); 59 $(this).toggleClass('.menu-container .menu.close'); /*追記してみました*/ 60 } 61 }); 62}); 63</script> 64</head> 65 66<body> 67 <header> 68 <div class="icon-hamburger"><span></span></div> 69 <div class="btn-trigger" id="btn02"> 70 <span></span> 71 <span></span> 72 <span></span> 73 </div> 74 75 <nav class="menu-container"> 76 <ul class="menu"> 77 <li class="menu-item"><a href="#">ホーム</a></li> 78 <li class="menu-item"><a href="#">ページ A</a></li> 79 <li class="menu-item"><a href="#">ページ B</a></li> 80 <li class="menu-item"><a href="#">ページ C</a></li> 81 <li class="menu-item"><a href="#">ページ D</a></li> 82 <li class="menu-item"><a href="#">ページ E</a></li> 83 </ul> 84 </nav> 85 </header> 86</body> 87</html>
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/08 23:32
2020/06/09 00:44
2020/06/09 00:57
2020/06/09 02:02
2020/06/09 08:21 編集
2020/06/09 08:50