ハンバーガーメニューを閉じているときにもハンバーガーメニューにあるリンクがクリックされてしまう

いつもお世話になっております。

標題の通り、スマホ用のハンバーガーメニューを用意したところ、
メニューを閉じているときにもリンクがクリックされてしまう現象が発生してしまいました。
余計なソースも入っているかもしれませんが
再現できないほうが問題かと思いますので
headerのソースをすべて掲載します。
(文字数が収まらなかったので、Codepenにて記載します。)

https://codepen.io/uicco/pen/OJJjaLe

●実装上必須条件
・headerの固定
・スマホメニューのアコーディオンメニュー
・スマホメニューのscroll可

●試したこと
・.sp-openがついていないときにheight:0にしてみる⇀変わらず

自分で原因を探るのに限界を感じて質問させていただきました。
以上、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

#SP-Header__inner:not(.sp-open) #SP-menu に対して display: none を設定し、要素を非表示にすることで、質問者さんの実現したいことが行えると思います (動作確認用リンク)。

CSS
1#SP-Header__inner:not(.sp-open) #SP-menu {
2    display: none; /* 追加 */
3    height: 0!important;
4    z-index: -10;
5}

投稿2019/10/29 08:10

s8_chu

総合スコア14731

samiA

2019/10/29 08:36

ありがとうございます！思った通りの結果になりました。 heightだけじゃだめだったんですね・・・大変助かりました。ありがとうございます。

s8_chu

2019/10/29 08:42 編集

> heightだけじゃだめだったんですね・・・ `height` プロパティを 0 に設定した場合には、子要素が常に `height: 0` を設定した要素からはみ出している状態で見えます。これは `overflow` プロパティのデフォルト値が visible であるためです。そのため、もし `height` プロパティを 0 に設定して子要素を隠したい場合は、 `overflow: hidden` を設定する必要がありますが、通常は `display: none` を使用するほうが楽で一般的だと思います。 `overflow` プロパティの各値 (visible, hidden) の詳細な働きがわからない場合は、以下のページが参考になると思います。 https://developer.mozilla.org/ja/docs/Web/CSS/overflow

samiA

2019/10/30 00:55

なるほど…。しかも自分のcssでもPC用のメニューを表示させているときにスマホ用メニューを見せないよう、display: none;を使っていました。きっちり理解ができていない証拠でしょう・・邁進致します。参考URLもありがとうございます、とても分かり易かったです！

samiA

2019/10/30 01:26

今回のにはあんまり関係ないかもしれませんが、たまたま見つけたのでメモついでに貼っておきます。 HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート https://coliss.com/articles/build-websites/operation/work/about-hidden-attribute.html

行動規範の内容に同意します