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

SPONSORED LINK

ハンバーガーメニューを作っていて、クリックするとふわっとヘッダーの下から出てくるメニューを作っていたのだが、PCのCHROMEのデベロッパーツールでは問題なく表示されるのに、

実際のスマホ(iphone11)では表示されない問題が起きた。

【ドロワーメニュー】デベロッパーツール上だと開くのに、スマホ上だと開かない症状
ドロワーメニューを実装した際に、PC用webブラウザのデベロッパーツールだと問題無く表示されるが、iPhoneのsafari(他の環境は試せていないので不明)だと上手く表示されない症状が発生。原因は、fixedしたヘッダーの中にドロワーメニューのhtmlを記述したことでした。

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

助かりました!!

SPONSORED LINK

原因

<header>をposition:fixed;し、

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

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

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

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

 

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

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

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

 

 

コメント