【ドロワーメニュー】デベロッパーツール上だと開くのに、スマホ上だと開かない症状

Web Design Tips
Web Design Tips

「スマホでドロワーメニューが開きません。修正をお願います。」

先日納品したwebサイトについて、クライアント様から上記連絡が入り大慌て。

ちなみに「ドロワーメニュー」とは、Webサイトのスマホレイアウトで頻繁に使われる、下記画像の様なメニューを指します。

右上のボタン(通称:ハンバーガー)をタップすると、画面外からメニューが出現。

クライアントからのメッセージを見た後、すぐさまgoogle chromeでページを開き、デベロッパーツールで確認!

「あれ?・・・普通に動いている、だと?」

(中略)

つまり、PC用webブラウザのデベロッパーツールだと問題無く表示されるが、iPhoneのsafari(他の環境は試せていないので不明)だと上手く表示されない症状が発生したわけです。

以下に原因と対策を記載します。

原因:position:fixedした要素の上で更にメニューをfixedしていた

問題が発生した案件では、「ページ内のどこを閲覧していても画面の上部にヘッダーが見える様、固定して欲しい。」というご要望を頂いておりました。

これはヘッダーに、positionプロパティで「fixed」を指定すれば簡単に実装可能。

スクロールしてもヘッダーは常に画面上部に表示

さらに、クライアントからもう一つご要望。

「ボタンをタップした時に、横からスライドして出てくるメニュー(ドロワーメニュー)が付けたい!」

ドロワーメニューについては本記事の前半でご紹介しましたが、こちらはCSSのtransformプロパティやjQuery等を用いて実装します(具体的な実装方法は本記事では割愛します。)

ドロワーメニューもページ右上に固定するために、先ほどと同様「position: fixed」を使い画面に固定してあげます。

ハイ!ここが問題です。

「fixedした要素(ヘッダー)の中で、更にドロワーメニューをfixedさせる」

これが原因でした。

何が起こるのかというと、ドロワーメニューがヘッダー(高さ僅か60px)に対してfixedされるため、ヘッダー以外の領域には表示されない状況になります。

さらに今回は、固定したヘッダーとドロワーメニューが重ならないように、ドロワーメニューに「top: 60px」を指定していたので、ヘッダーの表示領域からもスッポリ隠れる状況でした。

top: 0px;にするとこんな感じの表示。ヘッダー領域でブツンと切れる(iPhone8でキャプチャ)

以上の理由から、ハンバーガーを押しても一切動きが見えないため「ボタンを押しても動かない」という状況に陥ってしまった訳です。

解決方法

ドロワーメニューのhtmlの記述を、「ヘッダー内では無く、メインコンテンツ内に記述」してあげれば解決です。

めでたしめでたし。

おわりに

これで1時間以上ハマりました。

【ヘッダー固定】と【ドロワーメニュー】という、人気アイテムの組み合わせで発生しうる症状ですが、意外とドンピシャの記事が見つからなかったので、本記事を執筆させていただきました。

誰かのお役に立てれば幸いでございます。

残る謎:なぜデベロッパーツールだと表示されるのか

どうしてデベロッパーツール上(確認済:chrome、firefox、edge)だと普通にドロワーメニューが表示されるのか。

残念ながら原因はわからず終いです。

もしかしたら、iPhoneとfixedの相性が悪いのかな…?

いずれにせよ、デベロッパーツールを信用しすぎると私の二の前になります。

制作したWebサイトを納品する前には、必ず実機で確認する様にしましょうね!(自分に言い聞かせる)