Amazon商品をお得に購入する方法 ▶ ▶ ▶

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

URLをコピーする
URLをコピーしました!

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

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

皮革・ブランド品の宅配クリーニング リナビス
目次

参考にしたページ

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

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

原因と解決法

<header>をposition:fixed;し、

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

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

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

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

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

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

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

Amazon商品をお得に購入する方法

悩む人

少しでもお得にAmazonで買い物できる方法を知りたい!

かわしー

Amazonチャージでの購入がおすすめです!

「Amazonチャージ」はAmazonギフト券にお金をチャージして買い物する方法です。

購入金額に合わせて最大2.5%のポイントをゲットできます。(下記の表参照)

Amazon公式ページより

「Amazonチャージ」はどなたでも何度でも使えるお得なサービス。

積み重ねていけば大きな額になるので、オトクに買い物したい方はやらなきゃ損ですよ。

Amazonチャージのご紹介

Amazonチャージはこちら

※チャージ自体はすぐ終わるのでお買い物の前に是非やってみてください

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
TOP
目次
閉じる