🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

1回答

2014閲覧

ハンバーガーメニューが閉じている状態でメニューボタンが見えていないにもかかわらず、リンクが押せてしまう。

sakunyaro

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2021/02/21 03:54

前提・実現したいこと

ウェブサイト制作中で、行き詰ってしまいました。Googleでも調べましたが、解決方法が見つからず、こちらに質問させて頂きます。

【実現したいこと】
ハンバーガーメニューが閉じている状態で、メニューボタンは隠れている状態であるのに、なぜかマウスはhoverし、リンク先が押せてしまいます。閉じている状態ではリンクが反応しないようにしたいです。

該当のソースコード

html

1 2<div class="hamburger"> 3 <span></span> 4 <span></span> 5 <span></span> 6</div> 7 8<nav class="globalMenuSp"> 9 <ul> 10 11 <li><a href="#news"><span class="animation"><img src="img/nav_news.svg" alt="News" /></span></a><a href="#news"><span class="animation">News</span></a></li> 12 13 <li><a href="Room&amp;Facility/index.html"><span class="animation"><img src="img/nav_room&facility.svg" alt="Room and Facility" /></span></a><a href="Room&amp;Facility/index.html"><span class="animation">Room and Facility</span></a></li> 14 15 <li><a href="Access/index.html"><span class="animation"><img src="img/nav_access.svg" alt="Access" /></span><a href="Access/index.html"><span class="animation">Access</span></a></li> 16 17 <li><a href="Booking/index.html"><span class="animation"><img src="img/nav_booking.svg" alt="Booking" /></span></a><a href="Booking/index.html"><span class="animation">Booking</span></a></li> 18 19 <li><a href="Rent_a_house/index.html"><span class="animation"><img src="img/nav_rent_a_house.svg" alt="Rent a house" /></span></a><a href="Rent_a_house/index.html"><span class="animation">Rent a house</span></a></li> 20 21 <li><a href="Job_offer/index.html"><span class="animation"><img src="img/nav_job_offer.svg" alt="Job offer" /></span></a><a href="Job_offer/index.html"><span class="animation">Job offer</span></a></li> 22 23 </ul> 24</nav> 25

css

1 2.hamburger { 3 display : block; 4 position: fixed; 5 z-index : 3; 6 right : 13px; 7 top : 12px; 8 width : 42px; 9 height: 42px; 10 cursor: pointer; 11 text-align: center; 12 border-radius: 35%; 13 background:rgba(255,255,255,0.8) ; 14 border: 1.8px solid #275a6e; 15} 16.hamburger span { 17 display : block; 18 position: absolute; 19 width : 25px; 20 height : 2px ; 21 left : 8.5px; 22 background : #275a6e; 23 -webkit-transition: 0.3s ease-in-out; 24 -moz-transition : 0.3s ease-in-out; 25 transition : 0.3s ease-in-out; 26} 27.hamburger span:nth-child(1) { 28 top: 12px; 29} 30.hamburger span:nth-child(2) { 31 top: 20px; 32} 33.hamburger span:nth-child(3) { 34 top: 28px; 35} 36 37/* ナビ開いてる時のボタン */ 38.hamburger.active { 39 -webkit-transition: all 0.3s ease-in-out; 40 -o-transition : all 0.3s ease-in-out; 41 transition : all 0.3s ease-in-out; 42 -webkit-transition-delay: 0.6s; 43 -o-transition-delay : 0.6s; 44 transition-delay : 0.6s; 45 -webkit-transform: rotate(45deg); 46 -ms-transform : rotate(45deg); 47 -o-transform : rotate(45deg); 48 transform : rotate(45deg); 49 border-radius: none; 50 background:none ; 51 border: none; 52} 53.hamburger.active span:nth-child(2){ 54 width: 0px; 55} 56.hamburger.active span:nth-child(1), 57.hamburger.active span:nth-child(3){ 58 background :#fff; 59 -webkit-transition-delay: 0.3s; 60 -o-transition-delay: 0.3s; 61 transition-delay: 0.3s; 62} 63.hamburger.active span:nth-child(1){ 64 -webkit-transform: translateY(0px); 65 -ms-transform : translateY(0px); 66 -o-transform : translateY(0px); 67 transform : translateY(0px); 68} 69 70.hamburger.active span:nth-child(3){ 71 -webkit-transform: translateY(-16px) rotate(90deg); 72 -ms-transform: translateY(-16px) rotate(90deg); 73 -o-transform : translateY(-16px) rotate(90deg); 74 transform : translateY(-16px) rotate(90deg); 75} 76 77 78nav.globalMenuSp { 79 position: fixed; 80 z-index : 2; 81 top : 0; 82 left : 0; 83 height: 100%; 84 color: #fff; 85 background: rgba(0,0,0,0.7); 86 text-align: center; 87 width: 100%; 88 opacity: 0; 89 transition: opacity .6s ease, visibility .6s ease; 90} 91 92nav.globalMenuSp ul { 93 width: 100%; 94 display: flex; 95 flex-direction: row; 96 flex-wrap: wrap; 97 justify-content: center; 98 margin-top: 0; 99 margin-right: auto; 100 margin-bottom: 0; 101 margin-left: auto; 102 padding-top: 150px; 103 padding-right: 0; 104 padding-bottom: 0; 105 padding-left: 0; 106} 107 108nav.globalMenuSp ul li { 109 display: flex; 110 flex-direction: column; 111 list-style-type: none; 112 padding: 0; 113 width: 33%; 114 transition: .4s all; 115 font-family: "Koruri Regular sub"; 116 font-size: 0.8rem; 117} 118 119nav.globalMenuSp ul li img { 120 width: 50%; 121 margin-left: 25%; 122 margin-right: 25%; 123 margin-bottom: -20px; 124} 125 126 127nav.globalMenuSp ul li:last-child { 128 padding-bottom: 0; 129} 130nav.globalMenuSp ul li:hover{ 131 background :#ddd; 132} 133 134nav.globalMenuSp ul li a { 135 display: block; 136 color: #fff; 137 padding: 1em 0; 138 text-decoration :none; 139} 140 141/* このクラスを、jQueryで付与・削除する */ 142nav.globalMenuSp.active { 143 opacity: 100; 144 visibility: visible; 145 146} 147

JavaScript

1// JavaScript Document 2 3 //ハンバーガーメニュー 4$(function() { 5 $('.hamburger').click(function() { 6 $(this).toggleClass('active'); 7 8 if ($(this).hasClass('active')) { 9 $('.globalMenuSp').addClass('active'); 10 } else { 11 $('.globalMenuSp').removeClass('active'); 12 } 13 }); 14}); 15

試したこと

こちらのリンク先の症状が似ていましたので、同じようにopacity,visibilityをいじってみましたが、症状は変わりませんでした。

補足情報(FW/ツールのバージョンなど)

試したブラウザ、Google chrome、Microsoft edge、Firefox

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

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

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

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

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

guest

回答1

0

ベストアンサー

メニューボタンは隠れている状態であるのに、なぜかマウスはhoverし、リンク先が押せてしまいます。

「マウスはhoverし」の意味が良く分かりませんが、リンク先が押せてしまうのは、たとえopacity0にしても、クリックイベントは発生する、ということだと思います。

メニューを隠す、別の方法と組み合わせる必要がありそうですね。例えば、left-100vwなどを指定しておき、.activeなときだけ0に戻すとか…。

いや、あるいは単に、visibility: hiddenを付け忘れてるだけかな?

投稿2021/02/21 04:33

gpsoft

総合スコア1323

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

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

sakunyaro

2021/02/21 05:10

ご回答ありがとうございます! なるほど、別の方法で閉じている時だけメニューを見えなくしちゃえばいいんですね! leftに-100vwで解決できました! ちなみにvisibility: hiddenを付けてもクリックイベントは発生してしまっていました。。 長い時間悩んでいたので、大変助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問