ゆるミニマリストの愛用品リストCLICK

ドロワーメニューがスマホでクリックできるのに表示されない問題を解決

ハンバーガーメニューを作っていて、クリックするとふわっとヘッダーの下から出てくるメニューを作っていたのだが、PCのCHROMEのデベロッパーツールでは問題なく表示されるのに、実際のスマホ(iphone11)では表示されない問題が起きました。

今回はそちらの原因と解決法を書いていきます。

10秒でわかる!"超節約系"サービス

① コスパ最強。200万冊以上の本が好きなだけ読み放題

▶▶ Kindle Unlimited

③ 配送無料で年間5万円以上も節約。動画も音楽も好きなだけ

▶▶ Amazonプライム

10秒でわかる!
"超節約系"サービス

① コスパ最強。200万冊以上の本が好きなだけ読み放題

▶▶ Kindle Unlimited

③ 配送無料で年間5万円以上も節約。動画も音楽も好きなだけ

▶▶ Amazonプライム

もくじ

参考にしたページ

2時間ほど格闘した結果、下記のページを参考にさせていただいて解決することができました。

https://doggy-kbk12.com/fixed/

原因と解決法

<header>をposition:fixed;し、

その子要素のドロワーメニューの<div>もposition:fixed;していたことが原因。

縦に短いヘッダーにfixedしていたので表示がされなかった。

なので、上部固定のヘッダーを<header>の子要素にあらたに<div>を作り、

そことの兄弟関係でドロワーメニューの<div>を並べてみたところ、解決。

<header>は意味合いといしてのタグとして、これにCSSで装飾せず、

<header>はrelativeさせて、その子要素に、上部固定ヘッダーや、クリック後に現れるメニューを兄弟関係でコーディングすることが大事。

<header>に色々CSSで装飾してしまっていたのが失敗でした。

\ 人気商品が日替わりで!毎日お得なタイムセール/


  • URLをコピーしました!
もくじ