jqueryやcssを使った全幅のドロップダウンメニューを実装をしたい。

前提・実現したいこと

・jqueryを使った全幅のドロップダウンメニューを実装をしたい。

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

jQueryでメガメニューを簡単自作
上記サイトを参考に作成しているが、headerの中にロゴなどの他の要素を置いてしまうと、ドロップダウンの幅が親要素より伸びず、全幅を実現できない。

質問

header内に複数要素ある場合のメニューの全幅拡大の知見があるかた、上記コードの修正もしくは他の方法、参考になるサイトなどあれば、ご回答いただければ幸いです。

サイトを参考にして書いたコード

html
1    <header class="header">
2      <h2 class="logo">logo</h2>
3      <ul class="menu" id="menu">
4        <li class="menu_list">
5          <a href="#">メニュー01</a>
6
7          <div class="menu_contents">
8            <ul>
9              <li><a href="#">メニュー01コンテンツ</a></li>
10              <li><a href="#">メニュー01コンテンツ</a></li>
11              <li><a href="#">メニュー01コンテンツ</a></li>
12            </ul>
13          </div>
14        </li>
15
16        <li class="menu_list">
17          <a href="#">メニュー02</a>
18          <div class="menu_contents">
19            <ul>
20              <li><a href="#">メニュー02コンテンツ</a></li>
21              <li><a href="#">メニュー02コンテンツ</a></li>
22              <li><a href="#">メニュー02コンテンツ</a></li>
23            </ul>
24          </div>
25        </li>
26
27        <li class="menu_list">
28          <a href="#">メニュー03</a>
29          <div class="menu_contents">
30            <ul>
31              <li><a href="#">メニュー03コンテンツ</a></li>
32              <li><a href="#">メニュー03コンテンツ</a></li>
33              <li><a href="#">メニュー03コンテンツ</a></li>
34            </ul>
35          </div>
36        </li>
37      </ul>
38      <div class="link-box">
39        <a href="" class="link-item">リンクアイテム</a>
40        <a href="" class="link-item">リンクアイテム</a>
41      </div>
42    </header>

jquery
1  <script>
2    $(function () {
3      // ①マウスをボタンに乗せた際のイベントを設定
4      $("#menu li").hover(
5        function () {
6          // ②乗せたボタンに連動したメガメニューをスライドで表示させる
7          $(this).find(".menu_contents").stop().slideDown();
8
9          // ③マウスをボタンから離した際のイベントを設定
10        },
11        function () {
12          // ④マウスを離したらメガメニューをスライドで非表示にする
13          $(this).find(".menu_contents").stop().slideUp();
14        }
15      );
16    });
17  </script>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5
6ul,li {
7  list-style: none;
8}
9
10.header {
11  display: flex;
12  align-items: center;
13  background-color: rgb(255, 223, 223);
14}
15
16.logo {
17  margin-right: auto;
18}
19
20.link-box {
21  display: flex;
22}
23.link-item {
24  display: block;
25  line-height: 80px;
26  border: 1px solid black;
27}
28
29/* ①メニューボタンのスタイル */
30.menu {
31  display: flex;
32  position: relative;
33}
34.menu .menu_list {
35  width: 33.33%;
36}
37.menu .menu_list > a {
38  border: 1px solid #ccc;
39  display: block;
40  padding: 10px;
41  text-align: center;
42  transition: .3s;
43}
44.menu .menu_list > a:hover {
45  color: #fff;
46  background: #fb4343;
47}
48 
49/* ②メガメニューのスタイル */
50.menu_contents {
51  background: #fb4343;
52  display: none;
53  position: absolute;
54  top: 100%;
55  left: 0;
56  width: 100%;
57}
58.menu_contents li {
59  width: 100%;
60}
61.menu_contents li a {
62  color: #fff;
63}

行動規範の内容に同意します

回答1件

ベストアンサー

下記の修正で。

css
1.header {
2  display: flex;
3  align-items: center;
4  background-color: rgb(255, 223, 223);
5  position: relative; /* 追加 */
6}
7
8
9
10/* ①メニューボタンのスタイル */
11.menu {
12  display: flex;
13/*  position: relative; 削除 */
14}

メガメニューを position: absolute; で位置決めしていますが、これは position: relative; がある直近の祖先の位置やサイズが基準になります。
.menu にposition: relative; があるとこれが基準になるので画面幅一杯にはなりません。
.header の幅は画面幅と同じなので、ここにposition: relative;を移動させればいいでしょう。

投稿2021/03/05 17:39