投稿2021/09/30 07:45
編集2021/09/30 08:12今回初めての質問させていただきます。
ポートフォリオ作成のため、1つ目の作品を作成中です。
ハンバーガーメニューを実装することはできたのですが、ユーザビリティの観点からメニューの領域外をクリックしたときでもメニューが閉じる処理をさせたいと思っています。
headerの後に、divを用意してその領域がクリックされたらハンバーガーメニューのinputのチェックが外れるというような処理ができたらと思います。
もしくは、こういった記述のほうが分かりやすい、といったものがありましたがご意見いただきたいです。
HTML
1<head> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 3<script type="text/javaScript" src="js/script.js"></script> 4 5<title>FUKU茶屋</title> 6</head> 7 8<body class="full-page"> 9 <!------------------ 10 ヘッダー 11 -------------------> 12 <header class="site-header"> 13 <a href="#"> 14 <img src="img/logo1-white.png" alt="店ロゴ1"> 15 </a> 16 17 <!-- ハンバーガーメニューボタン --> 18 <div class="hamburger-menu"> 19 <input id="menu-btn-check" type="checkbox"> 20 <label class="menu-btn" for="menu-btn-check"> 21 <span></span> 22 </label> 23 24 <!-- ナビゲーションリスト --> 25 <nav class="header-nav"> 26 <ul class="nav-list"> 27 <li class="nav-item"> 28 <a class="nav-item__link" href="#about-cafe"><span>FUKU茶屋について</span></a> 29 </li> 30 <li class="nav-item"> 31 <a class="nav-item__link" href="#cafe-address"><span>店舗情報</span></a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-item__link" href="#price"><span>料金</span></a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-item__link" href="#"><span>フクロウの紹介</span></a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-item__link" href="#"><span>お問い合わせ</span></a> 41 </li> 42 </ul> 43 </nav> 44 </div> 45 </header> 46 47 <!-- ハンバーガーメニュー領域外をクリックして閉じる--> 48 <div class="close-content"></div>
CSS
1@charset "utf-8"; 2* { 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6 font-family: 'Rounded M+ 1p regular', 'Rounded M+ 1p', 'Rounded M+ 1p medium', 'Rounded M+ 1p bold'; 7} 8 9html { 10 scroll-behavior: smooth; 11} 12 13a { 14 text-decoration: none; 15} 16 17body { 18 background-color: #FFF5E2; 19} 20 21h1 { 22 font-family: m-plus-rounded-1p, sans-serif; 23 font-weight: 500; 24 font-style: normal; 25 border-bottom: 1px solid #4D362B; 26 font-size: 1.5em; 27 margin-bottom: 10px; 28} 29 30li { 31 list-style: none; 32} 33 34a, 35p { 36 font-family: m-plus-rounded-1p, sans-serif; 37 font-weight: 400; 38 font-style: normal; 39 font-size: 1em; 40} 41 42.site-main { 43 margin: 0, 20px; 44} 45 46 47/*———————————————— 48ヘッダー 49————————————————*/ 50.site-header { 51 width: 100%; 52 height: 60px; 53 background-color: #654A3C; 54 display: flex; 55 align-items: center; 56 position: fixed; 57 top: 0; 58 left: 0; 59 z-index: 10; 60} 61 62.site-header a { 63 display: flex; 64 align-items: center; 65 width: 190px; 66 height: 60px; 67 margin-left: 10px; 68 z-index: 30; 69} 70 71.site-header img { 72 width: 100%; 73} 74 75 76/*———————————————— 77ハンバーガーメニューの装飾 78————————————————*/ 79#menu-btn-check { 80 display: none; 81} 82 83.menu-btn { 84 position: fixed; 85 top: 7px; 86 right: 10px; 87 display: flex; 88 height: 46px; 89 width: 46px; 90 justify-content: center; 91 align-items: center; 92 z-index: 30; 93 border: 2px solid white; 94 border-radius: 8px; 95} 96 97.menu-btn span, 98.menu-btn span:before, 99.menu-btn span:after { 100 content: ''; 101 display: block; 102 height: 2px; 103 width: 25px; 104 border-radius: 2px; 105 background-color: #ffffff; 106 position: absolute; 107} 108 109.menu-btn span:before { 110 bottom: 8px; 111} 112 113.menu-btn span:after { 114 top: 8px; 115} 116 117#menu-btn-check:checked~.menu-btn span { 118 background-color: rgba(255, 255, 255, 0); 119} 120 121#menu-btn-check:checked~.menu-btn span::before { 122 bottom: 0; 123 transform: rotate(45deg); 124} 125 126#menu-btn-check:checked~.menu-btn span::after { 127 top: 0; 128 transform: rotate(-45deg); 129} 130 131#menu-btn-check:checked~.header-nav { 132 left: 0; 133} 134 135 136/*———————————————— 137ナビゲーション(SP) 138————————————————*/ 139.header-nav { 140 width: 100%; 141 height: auto; 142 position: fixed; 143 top: 0; 144 left: 100%; 145 z-index: 20; 146 background-color: #654A3C; 147 text-align: center; 148 transition: all 0.3s; 149} 150 151.header-nav ul li a { 152 display: block; 153 width: 100%; 154 font-size: 15px; 155 box-sizing: border-box; 156 color: #ffffff; 157 text-decoration: none; 158 padding: 15px; 159 position: relative; 160} 161 162.header-nav ul li a::before { 163 content: ""; 164 width: 7px; 165 height: 7px; 166 border-top: solid 2px #ffffff; 167 border-right: solid 2px #ffffff; 168 transform: rotate(45deg); 169 position: absolute; 170 right: 11px; 171 top: 16px; 172} 173 174/*ナビゲーション 領域外の装飾*/ 175 176.close-content { 177 width: 100%; 178} 179 180
JavaScript
1// ハンバーガーメニューを閉じる 2$(function() { 3 $('.nav-list a').on('click', function(event) { 4 $('#menu-btn-check').prop('checked', false); 5 }); 6}); 7 8// ハンバーガーメニュー領域外をクリックで閉じる 9
JavaScriptについては勉強不足なので、以下のサイトを参考にしてクラス名などを変更して記述してみたのですがそもそもの実装方法が自分のものと異なるため混乱してしまいました。
リンク内容
リンク内容
以下のように記述しましたが、そもそもクラスの付与を行って実装しているものではないので、見当違いのコードを記述をしていました。
この部分は参考にならないため無視していただいて構いません。
JavaScript
1var nav = $('.header-nav'); 2$('.close-content').click(function() { 3 if (nav.hasClass('open')) { 4 $('.header-nav').removeClass('open'); 5 } 6});
OS:macOS Big Sur 11.5.2
ツール：Visual Studio Code 1.60.2
教材やwebの情報をみながら初めて作成しているので、コードの効率の悪さなどがあり非常に回答者様側からしたら見にくくなっております。大変申し訳ございません。
何卒お力添えのほどお願いいたします。
回答1件
0
ベストアンサー
チェックボックスの状態でメニュー表示を管理しているようですから、チェックボックスの状態を変えるように変更をするといいでしょう。
たとえば：
js
1 $('.close-content').click(function () { 2 $('#menu-btn-check').prop('checked', false); 3 });
投稿2021/10/01 02:10
総合スコア36158
あなたの回答
tips
プレビュー
Q&A
