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

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

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

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

CSS

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

Q&A

解決済

3回答

645閲覧

CSSだけで実装したハンバーガーメニューを「×」以外に、メニューの領域外をクリックしても閉じるようにしたいです。

Belltan

総合スコア1

HTML

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

CSS

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

0グッド

1クリップ

投稿2022/06/17 08:54

編集2022/06/18 09:21

FC2ホームページ作成機能を利用して、JSは使わずにCSSだけでハンバーガーメニューを実装しているんですが、ハンバーガーメニューが展開中に「×」をクリックする以外に、ハンバーガーメニューの領域外をクリックしても閉じられるようにしたいのですが、どのようにすればいいのか分かりません。

今利用している機能がJSが反応しないことがあるため、できればCSSとHTMLだけで解決したいのですが、調べてもよく分かりませんでした。

今実装しているコードはこれです。(字数制限オーバーのため、CSSのコードを一部”上と同じ”と省略しました。)

お詳しい方、お知恵を拝借願います。

HTML

1<content> 2 <input id="hamburger" class="hamburger" type="checkbox"/> 3 <label class="hamburger" for="hamburger"> 4 <i></i> 5 <text> 6 <close>close</close> 7 <open>menu</open> 8 </text> 9 </label> 10 <section class="drawer-list"> 11 <ul> 12 <li><a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">メニュー1<font size="1">サブメニュー1</font></a></li> 13 <li><a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">メニュー2<font size="1">サブメニュー2</font></a></li> 14 <li><a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">メニュー3<font size="1">サブメニュー3</font></a></li> 15 </ul> 16 </section> 17</content> 18

CSS

1.drawer-list{ 2z-index: 2; 3} 4 5ul { 6 list-style: none; 7 margin: 0; 8 padding: 0; 9} 10 11.drawer-list { 12 position: fixed; 13 right: 0; 14 top: 0; 15 height: 100vh; 16 width: 60vw; 17 transform: translate(100vw, 0); 18 /* ie workaround */ 19 -ms-transform: translatex(-100vw); 20 box-sizing: border-box; 21 pointer-events: none; 22 padding-top: 50px; 23 transition: width 475ms ease-out, transform 480ms ease, border-radius 0.8s 0.1s ease; 24 border-bottom-left-radius: 100vw; 25 background-color: red; 26 background-color:rgba(254,244,244,0.9); 27} 28 29@media (min-width: 768px) { 30 .drawer-list { 31 width: 40vw; 32 } 33} 34.drawer-list ul { 35 height: 100%; 36 width: 100%; 37 margin: 0; 38 padding: 0; 39 overflow: auto; 40 overflow-x: hidden; 41 pointer-events: auto; 42} 43.drawer-list li { 44 list-style: none; 45 text-transform: uppercase; 46 pointer-events: auto; 47 white-space: nowrap; 48 box-sizing: border-box; 49 transform: translatex(100vw); 50 /* ie workaround */ 51 -ms-transform: translatex(-100vw); 52} 53.drawer-list li:last-child { 54 margin-bottom: 2em; 55} 56.drawer-list li a { 57 text-decoration: none; 58 color: #622d18; 59 text-align: left; 60 display: block; 61 padding: 1rem; 62 font-size: calc(24px - .5vw); 63} 64@media (min-width: 768px) { 65 .drawer-list li a { 66 text-align: right; 67 padding: 0.5rem; 68 } 69} 70.drawer-list li a:hover { 71 cursor: pointer; 72 background-color: red; 73 background-color:rgba(245,178,178,0.4); 74} 75 76input.hamburger { 77 display: none; 78} 79input.hamburger:checked ~ .drawer-list { 80 transform: translatex(0); 81 border-bottom-left-radius: 0; 82} 83input.hamburger:checked ~ .drawer-list li { 84 transform: translatex(0); 85} 86input.hamburger:checked ~ .drawer-list li:nth-child(1) { 87 transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96); 88} 89input.hamburger:checked ~ .drawer-list li:nth-child(2) { 90 transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96); 91} 92input.hamburger:checked ~ .drawer-list li:nth-child(3) { 93 transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96); 94} 95input.hamburger:checked ~ .drawer-list li:nth-child(4) { 96 transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96); 97} 98input.hamburger:checked ~ .drawer-list li:nth-child(5) { 99 transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96); 100} 101input.hamburger:checked ~ .drawer-list li:nth-child(6) { 102 transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96); 103} 104input.hamburger:checked ~ .drawer-list li:nth-child(7) { 105 transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96); 106} 107input.hamburger:checked ~ .drawer-list li:nth-child(8) { 108 transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96); 109} 110input.hamburger:checked ~ .drawer-list li:nth-child(9) { 111 transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96); 112} 113input.hamburger:checked ~ .drawer-list li:nth-child(10) { 114 transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96); 115} 116input.hamburger:checked ~ .drawer-list li:nth-child(11) { 117 transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96); 118} 119input.hamburger:checked ~ .drawer-list li:nth-child(12) { 120 transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96); 121} 122input.hamburger:checked ~ .drawer-list li:nth-child(13) { 123 transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96); 124} 125input.hamburger:checked ~ .drawer-list li:nth-child(14) { 126 transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96); 127} 128input.hamburger:checked ~ .drawer-list li:nth-child(15) { 129 transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96); 130} 131input.hamburger:checked ~ .drawer-list li:nth-child(16) { 132 transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96); 133} 134input.hamburger:checked ~ .drawer-list li:nth-child(17) { 135 transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96); 136} 137input.hamburger:checked ~ .drawer-list li:nth-child(18) { 138 transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96); 139} 140input.hamburger:checked ~ .drawer-list li:nth-child(19) { 141 transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96); 142} 143input.hamburger:checked ~ .drawer-list li:nth-child(20) { 144 transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96); 145} 146input.hamburger:checked ~ .drawer-list li:nth-child(21) { 147 transition: transform 1s 1.68s cubic-bezier(0.29, 1.4, 0.44, 0.96); 148} 149input.hamburger:checked ~ .drawer-list li:nth-child(22) { 150 transition: transform 1s 1.76s cubic-bezier(0.29, 1.4, 0.44, 0.96); 151} 152input.hamburger:checked ~ .drawer-list li:nth-child(23) { 153 transition: transform 1s 1.84s cubic-bezier(0.29, 1.4, 0.44, 0.96); 154} 155input.hamburger:checked ~ .drawer-list li:nth-child(24) { 156 transition: transform 1s 1.92s cubic-bezier(0.29, 1.4, 0.44, 0.96); 157} 158input.hamburger:checked ~ .drawer-list li:nth-child(25) { 159 transition: transform 1s 2s cubic-bezier(0.29, 1.4, 0.44, 0.96); 160} 161input.hamburger:checked ~ .drawer-list li:nth-child(26) { 162 transition: transform 1s 2.08s cubic-bezier(0.29, 1.4, 0.44, 0.96); 163} 164input.hamburger:checked ~ .drawer-list li:nth-child(27) { 165 transition: transform 1s 2.16s cubic-bezier(0.29, 1.4, 0.44, 0.96); 166} 167input.hamburger:checked ~ .drawer-list li:nth-child(28) { 168 transition: transform 1s 2.24s cubic-bezier(0.29, 1.4, 0.44, 0.96); 169} 170input.hamburger:checked ~ .drawer-list li:nth-child(29) { 171 transition: transform 1s 2.32s cubic-bezier(0.29, 1.4, 0.44, 0.96); 172} 173input.hamburger:checked ~ .drawer-list li:nth-child(30) { 174 transition: transform 1s 2.4s cubic-bezier(0.29, 1.4, 0.44, 0.96); 175} 176input.hamburger:checked ~ .drawer-list li:nth-child(31) { 177 transition: transform 1s 2.48s cubic-bezier(0.29, 1.4, 0.44, 0.96); 178} 179input.hamburger:checked ~ .drawer-list li:nth-child(32) { 180 transition: transform 1s 2.56s cubic-bezier(0.29, 1.4, 0.44, 0.96); 181} 182input.hamburger:checked ~ .drawer-list li:nth-child(33) { 183 transition: transform 1s 2.64s cubic-bezier(0.29, 1.4, 0.44, 0.96); 184} 185input.hamburger:checked ~ .drawer-list li:nth-child(34) { 186 transition: transform 1s 2.72s cubic-bezier(0.29, 1.4, 0.44, 0.96); 187} 188input.hamburger:checked ~ .drawer-list li:nth-child(35) { 189 transition: transform 1s 2.8s cubic-bezier(0.29, 1.4, 0.44, 0.96); 190} 191input.hamburger:checked ~ .drawer-list li:nth-child(36) { 192 transition: transform 1s 2.88s cubic-bezier(0.29, 1.4, 0.44, 0.96); 193} 194input.hamburger:checked ~ .drawer-list li:nth-child(37) { 195 transition: transform 1s 2.96s cubic-bezier(0.29, 1.4, 0.44, 0.96); 196} 197input.hamburger:checked ~ .drawer-list li:nth-child(38) { 198 transition: transform 1s 3.04s cubic-bezier(0.29, 1.4, 0.44, 0.96); 199} 200input.hamburger:checked ~ .drawer-list li:nth-child(39) { 201 transition: transform 1s 3.12s cubic-bezier(0.29, 1.4, 0.44, 0.96); 202} 203input.hamburger:checked ~ .drawer-list li:nth-child(40) { 204 transition: transform 1s 3.2s cubic-bezier(0.29, 1.4, 0.44, 0.96); 205} 206”上と同じ”(41) { 207”上と同じ” 3.28s ”上と同じ” 208} 209”上と同じ”(42) { 210”上と同じ” 3.36s ”上と同じ” 211} 212”上と同じ”(43) { 213”上と同じ” 3.44s ”上と同じ” 214} 215”上と同じ”(44) { 216”上と同じ” 3.52s ”上と同じ” 217} 218”上と同じ”(45) { 219”上と同じ” 3.6s ”上と同じ” 220} 221”上と同じ”(46) { 222”上と同じ” 3.68s ”上と同じ” 223} 224”上と同じ”(47) { 225”上と同じ” 3.76s ”上と同じ” 226} 227”上と同じ”(48) { 228”上と同じ” 3.84s ”上と同じ” 229} 230”上と同じ”(49) { 231”上と同じ” 3.92s ”上と同じ” 232} 233”上と同じ”(50) { 234”上と同じ” 4s ”上と同じ” 235} 236input.hamburger:checked ~ .drawer-list li a { 237 padding-right: 15px; 238} 239input.hamburger:checked ~ label > i { 240 background-color: transparent; 241 transform: rotate(90deg); 242} 243input.hamburger:checked ~ label > i:before { 244 transform: translate(-50%, -50%) rotate(315deg); 245} 246input.hamburger:checked ~ label > i:after { 247 transform: translate(-50%, -50%) rotate(-315deg); 248} 249input.hamburger:checked ~ label close { 250 color: #622d18; 251 width: 100%; 252} 253input.hamburger:checked ~ label open { 254 color: rgba(0, 0, 0, 0); 255 width: 0; 256} 257 258label.hamburger { 259 z-index: 9999; 260 position: relative; 261 display: block; 262 height: 400px; 263 width: 50px; 264} 265label.hamburger:hover { 266 cursor: pointer; 267} 268label.hamburger text close, 269label.hamburger text open { 270 text-transform: uppercase; 271 font-size: 0.8em; 272 align-text: center; 273 position: absolute; 274 transform: translateY(220px); 275 text-align: center; 276 overflow: hidden; 277 transition: width 0.25s 0.35s, color 0.45s 0.35s; 278} 279label.hamburger text close { 280 color: rgba(0, 0, 0, 0); 281 right: 0; 282 width: 0; 283} 284label.hamburger text open { 285 color: #622d18; 286 width: 100%; 287} 288label.hamburger > i { 289 position: absolute; 290 width: 100%; 291 height: 2px; 292 top: 50%; 293 background-color: #622d18; 294 pointer-events: auto; 295 transition-duration: 0.35s; 296 transition-delay: 0.35s; 297} 298label.hamburger > i:before, label.hamburger > i:after { 299 position: absolute; 300 display: block; 301 width: 100%; 302 height: 2px; 303 left: 50%; 304 background-color: #622d18; 305 content: ""; 306 transition: transform 0.35s; 307 transform-origin: 50% 50%; 308} 309label.hamburger > i:before { 310 transform: translate(-50%, -14px); 311} 312label.hamburger > i:after { 313 transform: translate(-50%, 14px); 314} 315 316label.hamburger { 317 position: fixed; 318 top: 15px; 319 right: 15px; 320}

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

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

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

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

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

yambejp

2022/06/17 09:07

そもそもonclickが書いてありますので「CSSだけで実装したハンバーガーメニュー」では無いと思いますが・・・
Belltan

2022/06/17 09:19 編集

すみません。回答ありがとうございます。 JSのシートに下記の内容だけ入力しているのですが、お恥ずかしながら入力したときのことを忘れてしまい専門知識もなく、なんのコードか分からなくなっています・・; 質問内容に記載しましたコードも全てネットからコピペしたものでして、独学で少し勉強してみましたが私には難しく、1つ1つ内容を詳しく理解しきれていないのが現状です・・・。 もし関係があるのなら、質問内容を訂正したいと思いますので、恐縮ですがご教示いただけますと幸いです。 $(function(){ var _window = $(window), _header = $('.tabs'), logoBottom; _window.on('scroll',function(){ logoBottom = $('.logo').height(); if(_window.scrollTop() > logoBottom){ _header.addClass('fixed'); } else{ _header.removeClass('fixed'); } }); _window.trigger('scroll'); });
guest

回答3

0

ベストアンサー

下記でどうでしょう。

.drawer-list 内に label を追加

html

1<content> 2 <input id="hamburger" class="hamburger" type="checkbox"/> 3 <label class="hamburger" for="hamburger"> 4 <i></i> 5 <text> 6 <close>close</close> 7 <open>menu</open> 8 </text> 9 </label> 10 <section class="drawer-list"> 11 <ul> 12 <li><a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">メニュー1<font size="1">サブメニュー1</font></a></li> 13 <li><a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">メニュー2<font size="1">サブメニュー2</font></a></li> 14 <li><a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">メニュー3<font size="1">サブメニュー3</font></a></li> 15 </ul> 16 <label class="overwrap" for="hamburger"></label> <!-- 追加 --> 17 </section> 18</content>

CSSに下記を追加

css

1.drawer-list li { 2 position: relative; 3 z-index: 2; 4} 5label.overwrap { 6 pointer-events: auto; 7 position: fixed; 8 top: 0; 9 left: -60vw; 10 width: 100vw; 11 height: 100vh; 12 z-index: 1; 13}

「ハンバーガーメニューの領域外」というのが具体的に度の範囲か不明瞭なので、aリンク以外の画面上どこをクリックしても閉じるようにしました。

Codepen サンプル

投稿2022/06/17 12:49

編集2022/06/17 13:07
hatena19

総合スコア33620

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

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

Belltan

2022/06/18 00:21

こちらを入力して思い通りになりました!! 諦めかけていましたので、大変助かりました。 ありがとうございました!
guest

0

既出の質問です。

[ハンバーガーメニュー 外] の検索結果: 10000件 | teratail【テラテイル】|ITエンジニア特化型Q&Aサイト


追記

失礼しました。ピュアCSSで対応したいということなのですね。

html

1<label class="hamburger" for="hamburger" tabindex="0">

css

1 input.hamburger:checked ~ label:focus ~.drawer-list { 2 transform: translatex(0); 3 border-bottom-left-radius: 0; 4 }

:focus-withinも併用すれば、さらにそれっぽくなるかもしれませんので、試行錯誤されてはどうでしょうか。

投稿2022/06/17 09:14

編集2022/06/17 09:39
Lhankor_Mhy

総合スコア35865

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

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

Belltan

2022/06/17 09:31

ご回答ありがとうございます。 こちらの回答内容は既に参考にしていくつか試みたのですが、改善できません。お恥ずかしながら、何が原因か分かりません。。(多分JSがうまく機能できていないのが原因かと思われますが・・) 大変恐縮ですが、ここにこのコードを入力すれば解決する、というようにお教えいただけますと大変助かります。
Belltan

2022/06/17 10:21

こちら入力してみましたが、できませんでした;; 不躾な質問文でしたが、ご丁寧にご回答いただきありがとうございました。 もう少し試行錯誤してみます・・
Lhankor_Mhy

2022/06/17 12:33

当方ではうまく行きましたので、ご提示いただいていない部分に原因があると思います。
guest

0

クラスhamburger以外をクリックしたら#hamburgerのチェックを外す

javascript

1document.addEventListener('click',e=>{ 2 if(!e.target.closest('.hamburger')){ 3 hamburger.checked=false; 4 } 5});

投稿2022/06/17 09:25

yambejp

総合スコア114572

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

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

Belltan

2022/06/17 10:25

ご回答ありがとうございます。 試しましたが出来ませんでした・・。 もう少し試行錯誤してみます。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問