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

Question

実現したいこと

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

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

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

該当のソースコード

JSFiddle https://jsfiddle.net/pf3m5sad/

<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>

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";
  /* アイコン「３本線」 */
  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の記述にも変更が必要なのかと思い、移動したりしてみましたがメガメニュー自体が消えてしまったりして解決しません。
どなたかご教授いただければ幸いです。

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

Comments

[Cocode]

完成形が分からないので、もしよければ、手書きでいいので見た目（レイアウト）を描いたものを写真に撮って、質問に添付していただくことは可能でしょうか？

どれをどう横に並べ、どう展開したいのかが想像できなくて＞＜
お手数をおかけします。

[mupo]

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

[Cocode]

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

Answer 1

とりあえず無理やりだいたいご希望の見た目にはできましたが、HTMLの構造とCSSの書き方に無理があるので、全体的に最初からやり直すことをおすすめします。
ご希望であればアドバイスも可能です。

見本ではメガメニューが全幅にちゃんとなっている理由は、親要素のwidthが画面に対して100%だからです。
質問者様のメガメニューの親要素は⭐️の幅しかありませんので、狭くなっちゃってるのです。

• 動作確認サンプル：https://jsfiddle.net/0qeko2m8/

変更箇所抜粋

@media screen and (min-width: 481px) {
  /* PC閲覧時のメガメニュー */

  header {
    position: fixed;  /* 固定ヘッダーにする */
    height: 100px; /* ヘッダー全体の高さ固定 */
    background-color: #ccc;
  }

  #header-right {
    margin-right: 50px; /* ⭐️ボタンを避けるための余白 */
  }
  
  .right-menu {
    position: fixed; /* 位置を画面に固定 */
    top: 0;
    right: 0;
    height: 100px; /* ヘッダーの高さにする */
  }

  ...

  .global_menu {
    /* メニュー全体のスタイル */
    position: relative;
    top: -16px; /* なぜかずれていたので無理やり位置調整 */
    right: 0;
    height: 100px; /* ヘッダーの高さにする */
    max-width: 1785px;
    margin: 0 auto;
    padding: 0;
    color: #fff;
    /* 文字色 */
    background: #e6a3ad;
    /* 背景色 */
    visibility: visible;
    overflow-y: visible;
    z-index: 9999;
    text-align: right;
  }

  ...

  .menu>a {
    /* 親項目のスタイル */
    font-weight: normal;
    padding: 38px 4px; /* ⭐️の位置を無理やり調整 */
  }

  ...

  .child_menu {
    /* 下層メニューのスタイル */
    width: 100%;
    position: fixed; /* スクリーンに固定 */
    top: 100px; /* ヘッダーの高さ */
    left: 0;
    color: #333;
    /* 文字色 */
    background: #ffb6c1;
    /* 背景色 */
    visibility: hidden;
    /* 下層メニューを非表示 */
    opacity: 0;
    /* 不透明度を最小に */
    transition: 1s opacity;
    /* アニメーション設定 */
  }

  ...

}

あと疑問としては、スマホの見た目にした時に、スマホメニューの中身が⭐️2つ分しかなくて、「メニュー、メニュー、メニュー」はないですけど大丈夫ですか？
「メニュー、メニュー、メニュー」もリンクになるのかなぁと思ったのですが…

---

見本のサイトのHTMLとCSSをほぼそのまま使いたければ

　　　     　    Logo
     menu  menu  menu  ⭐️  ⭐️
-----------------------------------
    megamenu megamenu megamenu
-----------------------------------

↑こんな感じのレイアウトにすれば楽だと思います。

もちろんご希望のロゴと横並びにするレイアウトも可能ですが、現在書かれているコードとは違うHTML構造と、CSSにしないといけないと思います。

---

CSSの命名規則について

コメント欄にてご質問いただいた、クラス名の「-」と「__」の違いについて回答です。

クラス名の付け方って迷うと思うんですけど、なのでいろんな人がルールをつくってくれていて（CSSの命名規則と呼ばれるようです）、BEMとかSMACSSとかが有名です。
で、私がお送りしたサンプルコードはBEMっぽいルールです。

「__」について

BEMは.block__element--modifierというルールです。

• .block： 要素の塊、大きなくくり
• __element： 塊の中の一要素
• --modifier： 修飾語。パターン違い

例）

<h1>好きなフルーツランキング</h1>
<ol class="ranking">
  <li class="ranking__item">パパイヤ</li>
  <li class="ranking__item">マンゴー</li>
  <li class="ranking__item">キウイ</li>
  <li class="ranking__item">パイナップル</li>
</ol>

<!-- 見た目ほぼ一緒で色違いの場合 -->
<button class="btn btn--red">赤色ボタン</button>
<button class="btn btn--green">緑色ボタン</button>

「-」について

ハイフンは単語を繋げたい時に使います！
例えば、「apple juice」という一つのクラス名をつけたい場合、

• ❌ <p class="apple juice">と書くと、.apple .juice別のクラスになってしまいます。
• ▲ <p class="applejuice">は読みにくい。
• ✅ <p class="apple-juice">読みやすいし、1つのクラスになる。

SMACSSやFLOCSS等はもっと細かくルールが決められているようです。
より詳しい情報はお調べくださいませ。
私の命名法は自己流がかなり入っていると思うので正しくないです。

Comments

[mupo]

大変丁寧に教えていただきありがとうございます！
たしかに希望通りの見た目にはできました。
コードがごちゃついている自覚はあるのですが、参考サイトのレイアウトから横並びの形に修正するのが精いっぱいで、具体的にどのように書けばスマートになるのかがわからず……よろしければアドバイスいただけると嬉しいです。

>あと疑問としては、スマホの見た目にした時に、スマホメニューの中身が⭐️2つ分しかなくて、
>「メニュー、メニュー、メニュー」はないですけど大丈夫ですか？
>「メニュー、メニュー、メニュー」もリンクになるのかなぁと思ったのですが…

大丈夫です。「メニュー、メニュー、メニュー」はスマホ表示不要で、★印のメニューはPC＆スマホ表示しなくてはならない……というデザイン的な縛りがあります；
教えていただいたレイアウトにしたいのは山々なのですが、縛りがあるので見本サイトのものをそのまま使用することができない感じです。
どうしても横並びのレイアウトにする必要がある感じで、申し訳ないです。

[Cocode]

いえいえ、すごく頑張られてるのは感じられるので、ただのお節介アドバイスでした＞＜
ちょっとおすすめのコード考えてみますー！

[mupo]

ありがとうございます！お手数をおかけします；＿；今後の参考になるので大変ありがたいです。
ゆっくりお待ちしています！

[Cocode]

ざっと組んでみました！こんな感じでいかがでしょう？

https://jsfiddle.net/9f2rokc8/

スマホの見た目はつけていないので、PC幅でみてくださいー！
スマホで不要な「メニュー、メニュー、メニュー」は、スマホ幅では非表示になるようにはしました。

[mupo]

ありがとうございます！すごくコンパクトなcssになっていて驚きました…！
当初のものと並べてみると、divタグばっかり使いすぎていたのかなと実感しますx_x

恐縮ながら一点質問させていただきたいのですが、クラス名の区切り方に「-」と「__」があるのにはなにか理由付けのようなものがありますか？

[Cocode]

クラス名のハイフンなどについての回答を更新しましたー！

[mupo]

うわーありがとうございます！ご指導いただき感謝申し上げます！
BEMやSMACSSといった用語自体初めて知りましたので、教えていただいたことを参考にこれから検索をかけて理解に努めたいと思います。
メインの質問外のことにも関わらず、本当に丁寧にご回答いただきありがとうございました^-^＊今後はもう少しマシなコードが書ける気がします！