CSSだけでドロップダウンメニューを作る方法【4種類のサンプル付き】

HTMLとCSSだけでドロップダウンメニューって作れる？

ドロップダウンメニューの実装は実務でもよくありますが、1から作るとなるとちょっと面倒に感じるかも知れません。

しかしHTMLとCSSだけで簡単に作れるので、今回はその方法をサンプルを使って解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

ドロップダウンメニューとは？

ドロップダウンメニューとは、当ブログにもあるようなカテゴリーなどメニューにマウスカーソルを乗せると、下層メニューが表示されるメニューになります。

じゅんぺいブログのドロップダウンメニュー

HTMLとCSSだけでドロップダウンニューを作る方法

今回は4種類のドロップダウンメニューの作り方をご紹介します。

シンプルなドロップダウンメニュー
シンプルなドロップダウンメニュー（フェードイン）
シンプルなドロップダウンメニュー（上から下に表示）
多階層のドロップダウンメニュー

HTMLとCSSだけなので、コピペすればサンプル通りになるはずです。

またコードはサンプルの左上のHTML・CSSをクリックしても確認できます。

シンプルなドロップダウンメニュー

まずは下層メニューが1つだけ表示されるシンプルなドロップダウンメニューです。

HTMLはこちらです。

<nav class="nav-menu">
  <ul class="menu-list">
    <li class="menu-item">
      <a href="#">Home</a>
    </li>
    <li class="menu-item drop-menu">
      <a href="#">About</a>
      <ul class="drop-menu-list">
        <li class="drop-menu-item">
          <a href="#">About 1</a>
        </li>
        <li class="drop-menu-item">
          <a href="#">About 2</a>
        </li>
        <li class="drop-menu-item">
          <a href="#">About 3</a>
        </li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">Service</a>
      <ul class="drop-menu-list">
        <li class="drop-menu-item">
          <a href="#">Service 1</a>
        </li>
        <li class="drop-menu-item">
          <a href="#">Service 2</a>
        </li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

HTMLの注意点ですが、ドロップダウンメニュー部分のulタグはliタグの中に書くということです。

それについては以下のHTMLで多階層メニューを作る方法で解説しています。

シンプルなドロップダウンメニュー(フェードイン)

次は先ほどのドロップダウンメニューをフェードインで表示させてみたいと思います。

HTMLは同じになり、CSSはこちらです。

/* ナビゲーションメニュー */
.nav-menu {
  background-color: #333; /* メニューの背景色 */
  color: #fff; /* メニューテキストの色 */
}
.menu-list {
  display: flex;
  justify-content: center; /* メニューアイテムを中央揃えに */
}
.menu-item {
  border-left: 1px solid #fff; /* メニューアイテムの左ボーダー */
  position: relative;
}
.menu-item:last-child {
  border-right: 1px solid #fff; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
  opacity: 1; /* 不透明度を最大に */
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: visible; /* 下層メニューを表示 */
}

.menu-item a {
  align-items: center;
  color: #fff; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width: 120px;
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
.drop-menu-list {
  background-color: #696969; /* ドロップダウンメニューの背景色 */
  left: 0;
  opacity: 0; /* 不透明度を最小に */
  position: absolute;
  top: 100%;
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: hidden; /* 下層メニューを非表示 */
  width: max-content;
  z-index: 1;
}

ポイントは以下になります。

ドロップダウンメニューは最初は非表示（opacity: 0;とvisibility: hidden;）
opacity: 0;だけでは見えないだけでクリックできてしまうので、クリックイベント不可にするvisibility: hidden;も併用
visibility: hidden;だけでもいいが、ふわっと表示させるためにopacityも使用
transitionでふわっとフェードで表示されるように指定

opacity: 0;とvisibility: hidden;の違いは以下の記事で解説しています。

シンプルなドロップダウンメニュー(上から下に表示)

今度はフェードインではなく上から下に表示されるようにします。

HTMLは同じになり、CSSはこちらです。

/* ナビゲーションメニュー */
.nav-menu {
  background-color: #333; /* メニューの背景色 */
  color: #fff; /* メニューテキストの色 */
}
.menu-list {
  display: flex;
  justify-content: center; /* メニューアイテムを中央揃えに */
}
.menu-item {
  background-color: #333; /* メニューアイテムの背景色 */
  border-left: 1px solid #fff; /* メニューアイテムの左ボーダー */
  position: relative;
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.menu-item:last-child {
  border-right: 1px solid #fff; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
  transform: scaleY(1); /* ドロップダウンメニューの表示 */
}
.menu-item:hover {
  background-color: #696969; /* メニューアイテムのホバー時の背景色 */
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.drop-menu-item:hover {
  opacity: .8; /* ドロップダウンメニューアイテムのホバー時の不透明度 */
  transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

.menu-item a {
  align-items: center;
  color: #fff; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width: 120px;
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
.drop-menu-list {
  left: 0;
  position: absolute;
  top: 100%;
  transform: scaleY(0); /* ドロップダウンメニューの非表示 */
  transform-origin: center top; /* 変形を適応する基準を設定 */
  transition: transform .3s; /* 表示の変化をアニメーション化 */
  width: max-content;
  z-index: 1;
}
.drop-menu-item {
  background-color: #696969; /* ドロップダウンメニューの背景色 */
  transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

ポイントは以下になります。

ドロップダウンメニューは最初はtransform: scaleY(0);にして上に隠す
上から下に降りてくるように、transform-origin: center top;を指定（これを書かないと中央から目を開けるように開く）
ホバーしたらtransform: scaleY(1);でドロップダウンメニューを開く

あとはメニューにカーソルを乗せたら少し薄くなるようにopacityやbackground-colorで色を変えています。

サンプルはこちらです。

See the Pen
シンプルなドロップダウンメニュー（上から下に表示） by junpei (@junpei-sugiyama)
on CodePen.

多階層のドロップダウンメニュー

これは当ブログの場合だと『Web制作 → スライダー』とカーソルを乗せると表示されます。

じゅんぺいブログの多階層メニュー

HTMLはこちらです。

<nav class="nav-menu">
  <ul class="menu-list">
    <li class="menu-item">
      <a href="#">Home</a>
    </li>
    <li class="menu-item drop-menu">
      <a href="#">About</a>
      <ul class="drop-menu-list">
        <li class="drop-menu-item">
          <a href="#">About 1</a>
        </li>
        <li class="drop-menu-item">
          <a href="#">About 2</a>
        </li>
        <li class="drop-menu-item">
          <a href="#">About 3</a>
        </li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">Service</a>
      <ul class="drop-menu-list">
        <li class="drop-menu-item">
          <a href="#">Service 1</a>
        </li>
        <li class="drop-menu-item">
          <a href="#">Service 2</a>
          <ul class="drop-menu-list-child">
            <li class="drop-menu-item-child">
              <a href="#">Service 2-1</a>
            </li>
            <li class="drop-menu-item-child">
              <a href="#">Service 2-2</a>
            </li>
            <li class="drop-menu-item-child">
              <a href="#">Service 2-3</a>
            </li>
          </ul>
        </li>
        <li class="drop-menu-item">
          <a href="#">Service 3</a>
        </li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

これは先ほどのシンプルなドロップダウンメニューとほぼ同じで、階層が1つ増えただけです。

CSSはこちらです。

/* ナビゲーションメニュー */
.nav-menu {
  background-color: #333; /* メニューの背景色 */
  color: #fff; /* メニューテキストの色 */
}
.menu-list {
  display: flex;
  justify-content: center; /* メニューアイテムを中央揃えに */
}
.menu-item {
  background-color: #333; /* メニューの背景色 */
  border-left: 1px solid #fff; /* メニューアイテムの左ボーダー */
  position: relative;
}
.menu-item:last-child {
  border-right: 1px solid #fff; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list,
.drop-menu-item:hover .drop-menu-list-child {
  opacity: 1; /* 不透明度を最大に */
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: visible; /* 下層メニューを表示 */
}

.menu-item a {
  align-items: center;
  color: #fff; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width: 120px;
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
.drop-menu-item {
  position: relative;
}

/* ドロップダウンメニューのスタイル */
.drop-menu-list-child {
  background-color: #4682b4; /* 下層メニューの背景色 */
}
.drop-menu-list {
  background-color: #696969; /* ドロップダウンメニューの背景色 */
  left: 0;
  opacity: 0; /* 不透明度を最小に */
  position: absolute;
  top: 100%;
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: hidden; /* 下層メニューを非表示 */
  width: max-content;
  z-index: 1;
}

/* 下層メニューのスタイル */
.drop-menu-list-child {
  left: 100%;
  opacity: 0; /* 不透明度を最小に */
  position: absolute;
  top: 0;
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: hidden; /* 下層メニューを非表示 */
  width: max-content;
  z-index: 1;
}

これまでと大きくは変わりませんが、メニューが表示される位置をleftやtopなどで調整しておきましょう。

特に下層メニューのleft: 100%;は右に表示させるのに必要で、これがないと真下に表示されます。

サンプルはこちらです。Service2の下層にメニューがあります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.