質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

メガメニューが全幅になってくれない

mupo
mupo

総合スコア35

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0リアクション

0クリップ

363閲覧

投稿2022/10/03 05:32

編集2022/10/03 06:22

実現したいこと

cssでメガメニューを実装したいと思っています。

発生している問題・エラーメッセージ

「CSSだけ!メガメニューを作る簡単テクニック(レスポンシブ対応)」
上記サイトを参考に作成しましたが、flexでロゴなどと一緒に並べるとメガメニューが全幅になってくれないことに気づきました。

該当のソースコード

JSFiddle https://jsfiddle.net/pf3m5sad/

HTML

<header> <div id="header"><h1>ロゴ画像</h1></div> <div id="header-right"> <div class="right-nav"> <ul><li>メニュー</li><li>メニュー</li><li>メニュー</li></ul></div></div> <div class="right-menu"> <input id="hanburger" type="checkbox"> <label for="hanburger" class="menu_button"></label> <nav class="global_menu"> <ul> <li class="menu"> <a href="#">★</a> <ul class="child_menu"> <li><a href="#">Child Menu</a></li> <li><a href="#">Child Menu</a></li> <li><a href="#">Child Menu</a></li> <li><a href="#">Child Menu</a></li> </ul> </li> <li class="menu"> <a href="#">☆</a> <ul class="child_menu"> <li><a href="#">Child Menu</a></li> <li><a href="#">Child Menu</a></li> <li><a href="#">Child Menu</a></li> <li><a href="#">Child Menu</a></li> </ul> </li> </ul> </nav> </div> </header>

css

body { overflow-x: hidden; } ul { padding-left: 0; } header { position: relative; max-width: 1500px; width: 100%; margin: 0 auto; display: flex; align-items: start; } #header-right { margin-left: auto; text-align: right; min-width: 768px; } div.right-nav { position: relative; margin-left: auto; } div.right-nav ul li { display: inline-block; margin-left: 2.5%; margin-right: 2.5%; text-align: center; } /* スマホ閲覧時のハンバーガーメニュー */ #hanburger { display: none; /* チェックボックスを非表示 */ } .menu_button { /* ボタンのスタイル */ width: 50px; /* 幅 */ height: 50px; /* 高さ */ position: fixed; top: 20px; right: 20px; background: #db7093; /* 背景色 */ z-index: 10; } .menu_button::before { /* アイコンのスタイル */ font-family: "Font Awesome 5 Free"; content: "\f0c9"; /* アイコン「3本線」 */ font-weight: 900; position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); } #hanburger:checked+.menu_button::before { /* アイコンのスタイル(チェック済み) */ content: "\f00d"; /* アイコン「×印」 */ } .global_menu { /* メニュー全体のスタイル */ visibility: hidden; /* メニューを非表示 */ width: 100%; height: 100%; position: fixed; top: 0; left: 0; padding: 30px; color: #333; /* 文字色 */ background: #ffc0cb; /* 背景色 */ overflow-y: scroll; text-align: center; } #hanburger:checked~.global_menu { /* メニュー全体のスタイル(チェック済) */ visibility: visible; /* メニューを表示 */ } .global_menu a { /* 各項目のスタイル */ display: block; width: 100%; } .global_menu a:hover { /* 各項目のスタイル(ホバー時) */ background: #ffb6c1; } .menu:not(:last-child) { margin-bottom: 20px; } .menu>a { /* 親項目のスタイル */ font-weight: bold; padding: 10px 20px; } .child_menu>li>a { padding: 10px 30px; font-size: 0.8em; } @media screen and (min-width: 481px) { /* PC閲覧時のメガメニュー */ .menu_button { display: none; /* ハンバーガーメニューのボタンを非表示 */ } .global_menu { /* メニュー全体のスタイル */ position: relative; width: 100%; max-width: 1785px; margin: 0 auto; padding: 0; color: #fff; /* 文字色 */ background: #e6a3ad; /* 背景色 */ visibility: visible; overflow-y: visible; z-index: 9999; text-align: right; } .menu, .child_menu>li { display: inline-block; text-align: center; } .menu:not(:last-child) { margin-bottom: 0; } .menu>a { /* 親項目のスタイル */ font-weight: normal; padding: 0; } .menu:hover>a { background: #ffb6c1; } .child_menu { /* 下層メニューのスタイル */ width: 100%; position: absolute; top: 100%; left: 0; color: #333; /* 文字色 */ background: #ffb6c1; /* 背景色 */ visibility: hidden; /* 下層メニューを非表示 */ opacity: 0; /* 不透明度を最小に */ transition: 1s opacity; /* アニメーション設定 */ } .menu:hover .child_menu { /* 下層メニューのスタイル(親項目ホバー時) */ visibility: visible; /* 下層メニューを表示 */ opacity: 1; /* 不透明度を最大に */ } .child_menu>li>a { padding: 10px 0; } .child_menu>li>a:hover { background: unset; color: #fff; }

試したこと

「.global_menu」のposition:relativeを削除し、「header」に追加する。
→このやり方で解決した話を見かけたので試しましたが、ピンクのエリアの表示がおかしくなりました。
visibilityの記述にも変更が必要なのかと思い、移動したりしてみましたがメガメニュー自体が消えてしまったりして解決しません。
どなたかご教授いただければ幸いです。

イメージ画像を追加しました↓
イメージ説明

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Cocode

2022/10/03 06:09

完成形が分からないので、もしよければ、手書きでいいので見た目(レイアウト)を描いたものを写真に撮って、質問に添付していただくことは可能でしょうか? どれをどう横に並べ、どう展開したいのかが想像できなくて>< お手数をおかけします。
mupo

2022/10/03 06:23

質問ありがとうございます! わかりづらくて申し訳ありません。画像を追加しました。 希望系のところは加工なので、ちょっと右上のあたりがおかしくて申し訳ないのですが、よろしければご確認をお願いします。
Cocode

2022/10/03 07:23

わかりやすいイメージありがとうございましたー!

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。