プルダウンメニューの中身にタイトルを入れたい

Question

こんにちは、いつもお世話になっております。

メニューを作っている最中なのですが、プルダウンの中にタイトルをいれる方法をご教示ください。
色々試行錯誤してみましたが、なかなか上手くいきません。

![]

タリーズの画像のような、タイトルがあってその下にメニューが並んでいるという風にしたいです。

  <nav class="global_menu">
    <ul>
      <li class="main_menu">
        <a href="#">商品</a>
        <ul class="sub_menu">
          <li class="title">商品</li>
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
        </ul>
      </li>
    </ul>
  </nav>

.sub_menu{
    width:100%;
    position:absolute;
    top:100%;
    left:0;
    background-color: rgba(7, 7, 7, 0.473);
    visibility: hidden; /* 下層メニューを非表示 */
    display: flex;
    flex-flow:row wrap;
    justify-content: space-around;
    margin:0;
    font-size:13px;
    opacity: 0; /* 不透明度を最小に */
    transition: 1s opacity; /* アニメーション設定 */
}

.sub_menu>li{
    flex-basis:25%;
    flex-shrink:2;
    color: white;
}

.title{
    border-bottom:solid 2px white;
    color:white;
    font-size:20px;
    width:100%;
    padding-left:0;
    padding-bottom:0;
    list-style-type: none;
}

.sub_menu>li>a{
    color: white;
    text-decoration: none;
    display:block;
    padding:10px 5px;
}

※端折って一部分だけこちらに記載してるので、おかしなところがあるかもしれません。
タイトルにはh1などを割り振った方がいいのでしょうか？
liだとどうしてもタイトルとメニューが横並びになってしまいます。
根本的にコードが間違っている場合はご指摘ください。

よろしくお願いいたします。

Comments

[javahack]

お手本があるなら、そのページをデベロッパーズツールでソースを見て真似てみてはどうでしょうか。
希望の構成が出来上がったら、文字や背景を少しずつ変更して独自のページを作ればよいかと思います。

[Lhankor_Mhy]

JavaScript は使っていないのですか？

[kyon_02]

>Lhankor_Mhy様
Javaは使ったことないのでHTMLとCSSのみで作成しています。

[Lhankor_Mhy]

JavaScript を使わずにメニューが表示されるのですね。
それはご提示いただいていない部分で書いてある、という理解で合っていますか？

Answer 1

タリーズのサイトはスクリプトを使っているようなので、そのまま使うのは難しいでしょうが、HTML構成ぐらいは参考になりますね。

タイトルはリストではないので、ulの外に出さないとダメですよね。
タグはdivでもh要素でもお好みで。

で、タイトルとリストをdivで囲んで、それのopacityを切り替えて表示させるようにすればいいでしょう。

例えば、

<nav class="global_menu">
  <ul>
    <li class="main_menu">
      <a href="#">商品</a>
      <div class="sub_menu_wrapper">
        <div class="title">商品</div>
        <ul class="sub_menu">
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
          <li><a href="#">サンプル</a></li>
        </ul>
        </li>
    </div>
  </ul>
</nav>

* {
  margin: 0;
  padding: 0;
}
.main_menu .sub_menu_wrapper{
  width:calc(100% - 40px);
  position:absolute;
  background-color: rgba(7, 7, 7, 0.473);
  padding: 20px;
  opacity: 0; /* 不透明度を最小に */
  transition: 1s opacity; /* アニメーション設定 */
  visibility: hidden;
  pointer-events: none;
}

.main_menu:hover .sub_menu_wrapper {
  opacity: 1;
  pointer-events: auto;
}
.sub_menu{
  display: flex;
  flex-flow:row wrap;
  justify-content: flex-start;
  font-size:13px;
}

/* 以下略 */

CodePenサンプル

Comments

[kyon_02]

教えていただいた方法を参考に作成することができました！
ありがとうございました！！

Answer 2

ご提示いただいていない部分の影響がどうなるかわかりませんが、以下を追加・変更するとどうでしょうか。

    .sub_menu {

/* ... */

      /* 削除 display: flex;
      flex-flow: row wrap; */
      display: grid;
      grid: auto-flow / auto auto auto auto;

/* ... */

    }


    .title {

/* ... */

      grid-column: span 4;
    }

Answer 3

商品の記述がダブっているのが気になりますが
構造的にはdl/dt/ddでもつとよいかもしれません

<nav class="global_menu">
  <ul>
    <li class="main_menu">
      <a href="#">商品</a>
      <dl class="sub_menu">
      <dt class="title">商品</dti>
        <dd><a href="#">サンプル</a></dd>
        <dd><a href="#">サンプル</a></dd>
        <dd><a href="#">サンプル</a></dd>
        <dd><a href="#">サンプル</a></dd>
        <dd><a href="#">サンプル</a></dd>
      </dl>
    </li>
  </ul>
</nav>