【HTML・CSS】ドロップダウンメニューの作り方

CSS
2019.09.12

この記事では、JavaScriptを使わず、HTMLとCSSだけでドロップダウンメニューを作る方法を解説します。

ドロップダウンメニューを作るには、ドロップダウンで表示するメニューの要素のdisplay属性を切り替えてメニューを表示したり、非表示にしたりする方法があります。
この作り方の場合、デフォルトでは”display: none”を設定しておき、トリガーとなる要素にマウスホバーした際に、display属性を更新します。
以降では、サンプルコードを使ってその作り方を紹介します。

スポンサーリンク

メニューを用意する

まずは、表示をドロップダウンメニューを表示した状態のHTMLとCSSを用意します。

HTMLは次のようになります。

<div class="dropdown">
    <div class="menu">
      <div class="menu-title">Menu1</div>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu1</a></li>
        </ul>
      </div>
    </div>

    <div class="menu">
      <div class="menu-title">Menu2</div>
    </div>
    <div class="menu">
      <div class="menu-title">Menu3</div>
    </div>
</div>

更にCSSも定義します。

.dropdown {
  display: flex;
}

.menu {
  width: 300px;
  text-align: center;
}

.menu-title {
  background: #090032;
  color: #ffffff;
}

.sub-menu {
  background: #B9B9B9;
  position: relative;
}

.sub-menu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 300px;
}

.sub-menu > ul > li > a {
  text-decoration: none;
  color: #ffffff;
}

See the Pen
ドロップダウンメニュー Part1 by aiiro (@aiiro29)
on CodePen.

マウスホバーでメニューの表示を切り替えてドロップダウンメニューにする

“menu”の要素をマウスホバーした時のみ、ドロップダウンで”sub-menu”を設定した要素を表示するようにします。
“sub-menu”にはデフォルトで”display: none”を設定します。

“menu:hover”でマウスカーソルがホバーしたときに”sub-menu”に”display: inline-block”を付与することで、非表示になっていたメニューが表示されるようになります。

CSSを次のように変更します。

.dropdown {
  display: flex;
}

.menu {
  width: 300px;
  text-align: center;
}

.menu-title {
  background: #090032;
  color: #ffffff;
}

.sub-menu {
  display: none;
  background: #B9B9B9;
  position: relative;
}

.sub-menu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 300px;
}

.sub-menu > ul > li > a {
  text-decoration: none;
  color: #ffffff;
}

.menu:hover .sub-menu {
  display: inline-block;
}

See the Pen
ドロップダウンメニュー Part2 by aiiro (@aiiro29)
on CodePen.

スポンサーリンク