実現したいこと
ハンバーガーメニューの領域外をクリックしてもメニューが閉じるようにしたいです。
参考サイトをいろいろ見てみたのですが、今一つ理解できず、自分のデザインにいちばん近いと思われるサイトのコードを真似てみようとしましたが、やはりうまくいきません。
【参考にしたいページ】
https://style01.net/1049/
このページのような動作をさせるために、自分のjsにどう書き加えたらよいのかアドバイスをいただければ幸いです。
よろしくお願いいたします。
該当のソースコード
HTML
1<header class="header"> 2<div class="header__inner"> 3<nav class="header-nav"> 4<div class="drawer"> 5<h1 class="header-logo"> 6<a href="index.html"> 7<img src="common/btn_logo.jpg" alt="ロゴ" title="トップページに戻る"> 8</a> 9</h1> 10<!-- /.drawer --></div> 11<div class="header-menu"> 12<ul class="main-menu"> 13 <li><a href="">Home</a></li> 14 <li><a href="">メニュー01</a></li> 15 <li><a href="">メニュー02</a></li> 16 <li><a href="">メニュー03</a></li> 17 <li><a href="">メニュー04</a></li> 18 <li><a href="">メニュー05</a></li> 19</ul> 20<!-- /.menu --></div> 21</nav> 22<button type="button" class="nav-Toggle"> 23 <span></span> 24 <span></span> 25 <span></span> 26</button> 27<!-- /.header__inner --></div> 28</header> 29 30<main class="main"> 31コンテンツ 32</main>
CSS
1:root { 2 --base-color: #fff; 3 --key-color: #f98903; 4 --key-color-lighter: #fee7cd; 5 --key-color-darker: #f86700; 6 --sub-color: #4c3232; 7 --sub-color-lighter: ; 8 --sub-color-darker: ; 9 --accent-color: #56bd01; 10 --accent-color-lighter: #abde80; 11 --accent-color-darker: #4ca900; 12 --font-color: #333; 13 --gray: #e4e3e2; 14 --gray-lighter: #f5f5f4; 15 --gray-darker: #d8d6d5; 16 --notice: #c62727; 17 --shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 18 --font-title:'Kosugi Maru', sans-serif; 19 --font-gothic: 'Noto Sans JP', sans-serif; 20 --font-mincho: 'Noto Serif JP', serif; 21 --font-eng: 'Dancing Script', cursive; 22} 23 24.header { 25 position: fixed; 26 z-index: 999; 27 top: 0; 28 left: 0; 29 width: 100%; 30 min-width: 100%; 31 height: 100px; 32 background-color: #fff; 33 border-bottom: 3px solid var(--key-color); 34} 35.header-nav { 36 width: 100%; 37 height: 100px; 38 position: relative; 39} 40.drawer { height: 100px; } 41.header-logo { 42 margin-left: 20px; 43 padding-top:7px; 44} 45.header-logo img { width: 120px; } 46 47/***----- header-menu -----***/ 48.header-menu { 49 text-align: center; 50 background-color: rgba(255,255,255,.9); 51 transition: .5s ease; 52 -webkit-transform: translateX(-105%); 53 transform: translateX(-105%); 54} 55.main-menu li { font-family: var(--font-title); } 56.main-menu li:first-of-type { font-family: var(--font-gothic); } 57.main-menu li a { 58 display: block; 59 padding: 1.15em; 60 border-bottom: 1px dotted #333; 61 color: var(--font-color); 62 text-decoration: none; 63} 64.main-menu li a:hover { 65 background-color: var(--key-color); 66 color: #fff; 67} 68 69 70/***----- OPEN時の動き -----***/ 71.header-menu.open { 72 -webkit-transform: translateX(0%); 73 transform: translateX(0%); 74} 75 76/***----- トグルボタンのスタイルを指定 -----***/ 77.nav-Toggle { 78 display: block; 79 position: absolute; 80 width: 42px; 81 height: 42px; 82 z-index: 3; 83 top: 20px; 84 right: 20px; 85 padding: 10px; 86 background-color: transparent; 87 border: none; 88 appearance: none; 89 -moz-appearance: none; 90 -webkit-appearance: none; 91 cursor: pointer; 92} 93.nav-Toggle span { 94 display: block; 95 position: absolute; 96 width: 40px; 97 border-bottom: solid 3px var(--key-color); 98 -webkit-transition: .35s ease-in-out; 99 -moz-transition: .35s ease-in-out; 100 transition: .35s ease-in-out; 101 border-radius: 3px; 102} 103.nav-Toggle span:nth-child(1) { top: 5px; } 104.nav-Toggle span:nth-child(2) { top: 15px; } 105.nav-Toggle span:nth-child(3) { top: 26px; } 106 107/***----- .nav-Toggleがactiveの時 -----***/ 108.nav-Toggle.active span:nth-child(1) { 109 top: 15px; 110 -webkit-transform: rotate(-45deg); 111 -moz-transform: rotate(-45deg); 112 transform: rotate(-45deg); 113} 114.nav-Toggle.active span:nth-child(2), 115.nav-Toggle.active span:nth-child(3) { 116 top: 15px; 117 -webkit-transform: rotate(45deg); 118 -moz-transform: rotate(45deg); 119 transform: rotate(45deg); 120} 121 122 123/** media Queries 124===================================================================================*/ 125@media only screen and (min-width: 1025px) { 126 127.header { 128 position: fixed; 129 z-index: 999; 130 top: 0; 131 left: 0; 132 width: 100%; 133 height: 100px; 134 min-width: 1200px; 135 border-bottom: none; 136 box-shadow: 0 2px 8px 0 rgba( 0, 0, 0, 0.15); 137} 138.header__inner { 139 width: 1200px; 140 padding: 0; 141 margin: 0 auto; 142} 143.header-nav { display: flex; } 144.drawer {} 145.header-logo { margin-top: 4px; } 146 147.header-menu { 148 display: flex; 149 justify-content: flex-end; 150 width: 100%; 151 height: 100px; 152 background-color: transparent; 153 -webkit-transform: translateX(0); 154 transform: translateX(0); 155} 156.main-menu { 157 display: flex; 158 margin: 0; 159 height: 100px; 160} 161.main-menu li a { 162 text-decoration: none; 163 font-size: 1.6rem; 164 line-height: 1.2; 165 color: var(--font-color); 166 border-bottom: none; 167 padding: 0 15px; 168 position: relative; 169 width: 100%; 170 height: 100px; 171 display: flex; 172 justify-content: center; 173 align-items: center; 174} 175.main-menu li a:hover { 176 background-color: var(--key-color-lighter); 177 color: var(--font-color); 178} 179.nav-Toggle{ display: none; } 180 181} 182 183 184/** media Queries 185===================================================================================*/ 186@media only screen and (max-width: 1024px) { 187 188.header, 189.header-nav, 190.drawer { 191 width: 100%; 192 min-width: 100%; 193} 194}
js
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 2<!-- humburger menu --> 3<script> 4 $(function() { 5 $('.nav-Toggle').click(function() { 6 $(this).toggleClass('active'); 7 $('.header-menu').toggleClass('open'); 8 }); 9}); 10</script>
回答1件
あなたの回答
tips
プレビュー