今回はHTML CSS JavaScriptでハンバーガーメニューを作成し、メニューボタンを押してもリストが表示されない時の対処法を解説していきたいと思います。
まずはハンバーガーメニューを作ります。
赤矢印のボタンを押すと、ボタン自体は機能していますが、出てくるはずのメニューリストが下の画像をご覧の通り表示されません。
CSSにoptionプロパティを追加し、z-indexを指定して、メニュー画面が前面に出てくるように設定したらいいのではないかと思いやってみましたがダメでした。
そこで、CSSをよくよく確認してみると、overflow-x: hidden;が全体に指定されていました！
overflow-x: hidden; とは画面からはみ出た横方向のコンテンツを切り取ってしまうプロパティです。
このoverflow-x: hidden;を削除し、max-width を指定しました！
ブラウザ上でも確認をしてみます。
綺麗にメニューリストが表示されました！
今回私の場合はCSSでoverflow-xを指定していたことが理由ですが、他にもクラス名やidが間違っていてうまく反応してくれなかったりといろんな要因があります。
検証ツールなどを使ってできるだけ時間をかけずに効率的に見つけ出せるようになるといいですね！
以上、HTML CSS 【初心者向け】ハンバーガーメニューのリストが表示されない時の対処法でした★！
コメント