2022/06/25 

CSSだけで出来るドロップダウンメニューを作ってみよう！

HP/ブログを作成しているとドロップダウンメニューの設置することが多いですよね。
私もメニューがグローバルナビゲーションに収まらくなりそうなので、実装しようと思い調べてみました。
今回はこのドロップダウンメニューをCSSのみで実装する方法を試してみました。

メニュー基本

以下のHTMLはメニュー、サブメニューの基本的なコードです。


 <ul class="gnav-menu">
  <li>
   <a>menu-1</a>
   <ul class="sub-menu">
    <li><a href="#">sub-menu-1</a></li>
    <li><a href="#">sub-menu-2</a></li>
    <li><a href="#">sub-menu-3</a></li>
   </ul>
  </li>
  <li>
   <a>menu-2</a>
   <ul class="sub-menu">
    <li><a href="#">sub-menu-1</a></li>
    <li><a href="#">sub-menu-2</a></li>
    <li><a href="#">sub-menu-3</a></li>
   </ul>
  </li>
  <li>
   <a>menu-3</a>
   <ul class="sub-menu">
    <li><a href="#">sub-menu-1</a></li>
    <li><a href="#">sub-menu-2</a></li>
    <li><a href="#">sub-menu-3</a></li>
   </ul>
  </li>
 </ul>

HTMLのコードでデフォルトCSS設定だと以下の表示になります。
これだと、当然見た目悪いですね。ここからいろいろ改善してみたいと思います。

メニューを横にならべたい

メニューを横にならべたいなら、display: flex を使用すればいいらしい、試してみた。
display:-webkit-flexは、iOS-Safariの7.0以降に対応するために追加してます。

.gnav-menu {
  display: -webkit-flex;
  display: flex;
}

マーカーを消したい

メニューを横にならべてみたが、マーカー表示は消したい。
以下の、list-style-type: none を指定すると消えました。
サブメニューも消したいので、同じく指定します。

.gnav-menu {
  display: -webkit-flex;
  display: flex;
  list-style-type: none;
}
.sub-menu {
  list-style-type: none;
}

サブメニューをフォーカスが当たった時に表示したい

メニューを横並び、サブメニューを表示出来たので、今度はメニューにフォーカスが当たった時にサブメニューを表示したいですね。

まず、サブメニューを最初は見えなくしてみようか。
サブメニューのにopacity（透過率）を 0% すれば、見えなくなりました。

.gnav-menu {
  display: -webkit-flex;
  display: flex;
  list-style-type: none;
}
.sub-menu {
  list-style-type: none;
  opacity : 0%;
}

ただ、これだけだと、見えなくなっただけで、フォーカスが当たった時に表示しませんね。
なので、hoverを追加して、フォーカスされたとき、sub-menuが表示するようにしてみました。

.gnav-menu {
  display: -webkit-flex;
  display: flex;
  list-style-type: none;
}
.sub-menu {
  list-style-type: none;
  opacity : 0%;
}
.gnav-menu:hover .sub-menu {
  opacity : 100%;
 }

メニュー配下のサブメニューだけフォーカスが当たった時に表示したい

フォーカスが当たった時に、サブメニューを表示するのは出来ましたが、すべてのサブメニューが表示されてしまいます。これだといまいちなので、フォーカスメニュー配下のサブメニューだけ表示したいですね。
.gnav-menu :hoverに li を追加して、その項目にフォーカスされたサブメニューとすることで実現できました。 

.gnav-menu {
  display: -webkit-flex;
  display: flex;
  list-style-type: none;
}
.sub-menu {
  list-style-type: none;
  opacity : 0%;
}
.gnav-menu li:hover .sub-menu {
  opacity : 100%;
 }