HTMLとCSSだけで作る!ドロップダウンメニューの簡単な作り方

CSS
スポンサー

はじめに

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

ドロップダウンメニューを作るには、ドロップダウンで表示するメニューの要素に、デフォルトでは”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.

CSSHTML
スポンサー
フォローする
スポンサー
Public Constructor