Q&A
参考にしたいサイトで、jsのif文が今回の質問のヒントになると思われますが、試されましたでしょうか？
もし試されたのであれば、そのif文も記載していただくと分かりやすいかもしれません。
実現したいこと
ハンバーガーメニューの領域外をクリックしてもメニューが閉じるようにしたいです。
参考サイトをいろいろ見てみたのですが、今一つ理解できず、自分のデザインにいちばん近いと思われるサイトのコードを真似てみようとしましたが、やはりうまくいきません。
【参考にしたいページ】
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>
doyumaさま
お返事ありがとうございます。
参考サイトのif文を試してみたのですが、状況が変わりませんでした。
<script>
$(function() {
$('.nav-Toggle').click(function() {
$(this).toggleClass('active');
$('.header-menu').toggleClass('open');
});
});
//nav以外をタップした時
if(nav-Toggle.hasClass('active')){
main.on('click',function(){
nav-Toggle.removeClass('active');
main.removeClass('active');
nav.slideUp();
});
}
</script>
と、自分のhtmlに合わせて書いてみたのですが、このif文をこの位置にこういう入れ方で良いのかどうかもよくわかっていなくて、すみません。
cssに変数が使われていますが、変数を定義している部分がないのでところどころ見た目が反映されていません。
定義部分のコードもいただくことは可能ですか？
Cocodeさま
お返事ありがとうございます。
上記「該当のソースコード」cssに変数を追加しましたので、ご確認をお願いします。
回答1件
0
ベストアンサー
何点か気になった箇所がございますので、順番に記載します。
１．jsの１行目にjQueryのcdnの記載があります。これはhtmlの</body>の直上に入れた方が良いでしょう。また、その下に自作のjsを指定してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body>
以下の3点目にjsの記載例を紹介します。
２．cssにて、.mainにheightを追加しましょう。
.main { height: 1000px; }
３．jsのif文中にて、jQueryオブジェクトの記載が誤っています。参考例を記載しますので参考にしてください。
$('.nav-Toggle').click(function() { $(this).toggleClass('active'); $('.header-menu').toggleClass('open'); //nav以外をタップした時 if($('.nav-Toggle').hasClass('active')){ $('.main').on('click',function() { $('.nav-Toggle').removeClass('active'); $('.header-menu').removeClass('open'); }) } });
投稿2023/02/27 09:09
総合スコア66
あなたの回答
tips
プレビュー
