質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2967閲覧

【ハンバーガーメニュー】 領域外をクリックしてもメニューが閉じるようにしたい

eiai

総合スコア9

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/02/26 06:38

編集2023/02/28 06:20

実現したいこと

ハンバーガーメニューの領域外をクリックしてもメニューが閉じるようにしたいです。

参考サイトをいろいろ見てみたのですが、今一つ理解できず、自分のデザインにいちばん近いと思われるサイトのコードを真似てみようとしましたが、やはりうまくいきません。

【参考にしたいページ】
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

doyuma

2023/02/26 13:38 編集

参考にしたいサイトで、jsのif文が今回の質問のヒントになると思われますが、試されましたでしょうか? もし試されたのであれば、そのif文も記載していただくと分かりやすいかもしれません。
eiai

2023/02/26 15:02

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文をこの位置にこういう入れ方で良いのかどうかもよくわかっていなくて、すみません。
Cocode

2023/02/26 21:48

cssに変数が使われていますが、変数を定義している部分がないのでところどころ見た目が反映されていません。 定義部分のコードもいただくことは可能ですか?
eiai

2023/02/27 02:01

Cocodeさま お返事ありがとうございます。 上記「該当のソースコード」cssに変数を追加しましたので、ご確認をお願いします。
guest

回答1

0

ベストアンサー

何点か気になった箇所がございますので、順番に記載します。

1.jsの1行目に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の記載例を紹介します。

2.cssにて、.mainにheightを追加しましょう。

.main { height: 1000px; }

3.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

doyuma

総合スコア66

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eiai

2023/02/27 15:42

doyumaさま ご回答ありがとうございます。 アドバイスしていただいた通りに記述したところ、無事に領域外クリックでもメニューが閉じるようになりました。 大変助かりました! 本当にありがとうございました。
doyuma

2023/02/27 21:20

解決できて良かったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問