エンジニアブログ

HOME > css > HTMLとCSSだけ！ドロップダウンメニューの実装方法

HTMLとCSSだけ！ドロップダウンメニューの実装方法

css
HTMLとCSSだけ！ドロップダウンメニューの実装方法

ウェブサイトのナビゲーションメニューは重要な要素の一つです。この記事では、HTMLとCSSだけを使用してシンプルなドロップダウンメニューを作成する手順を説明します。

デモ

See the Pen dropdown-menu by hide (@hide225) on CodePen.

HTMLの設定

まず、HTMLに基本的な構造を組みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ドロップダウンメニュー</title>
</head>
<body>
  <header>
    <ul class="header__list">
      <li class="header__item"><a href="#">HOME</a></li>
      <li class="header__item">
        <a href="#">Service</a>
        <ul class="dropdown__list">
          <li class="dropdown__item"><a href="#">Service-1</a></li>
          <li class="dropdown__item"><a href="#">Service-2</a></li>
          <li class="dropdown__item"><a href="#">Service-3</a></li>
        </ul>
      </li>
      <li class="header__item">
        <a href="#">About</a>
        <ul class="dropdown__list">
          <li class="dropdown__item"><a href="#">About-1</a></li>
          <li class="dropdown__item"><a href="#">About-2</a></li>
          <li class="dropdown__item"><a href="#">About-3</a></li>
        </ul>
      </li>
      <li class="header__item">
        <a href="#">Profile</a>
        <ul class="dropdown__list">
          <li class="dropdown__item"><a href="#">Profile-1</a></li>
          <li class="dropdown__item"><a href="#">Profile-2</a></li>
          <li class="dropdown__item"><a href="#">Profile-3</a></li>
        </ul>  
      </li>
      <li class="header__item"><a href="#">Contact</a></li>
    </ul>
  </header>
</body>
</html>

CSSの設定

見栄えを良くするために、CSSでスタイルを追加します。以下は基本的なスタイルの例です。
仕組みとしては、ドロップダウンは初期状態を’display: none;’で非表示にし、
親要素がホバーされた時に’display: block;’で表示します。

ul {
  list-style: none;
  padding:0;
}

.header__list {
  display: flex;
}
.header__item {
  width: 20%;
  height: 60px;
  background-color: #efefef;
  position: relative;
  transition: all ease .3s;
}
.header__item:hover {
  background-color: #333;
}
.header__item:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transition: all ease .3s;
}
.header__item:hover::before {
  background-color: #fff;
}
.header__item a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 1rem;
  transition: all ease .3s;
}
.header__item:hover a {
  color: #fff;
}

/*
ドロップダウンメニュー
*/
.dropdown__list {
  display: none;
  width: 100% ;
  position: absolute;
  top: 60px;
  left: 0;
}
.header__item:hover .dropdown__list {
  display: block;
}
.dropdown__item {
  background-color: #333;
  height: 60px;
  transition: all ease .3s;
  position: relative;
}
.dropdown__item:not(:first-child)::before{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.dropdown__item:hover {
  opacity: .7;
}
.dropdown__item a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
}
.dropdown__item a::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: calc(50% - 5px);
}

これで、シンプルなHTMLとCSSだけでドロップダウンメニューを実装しました。各メニューにマウスをホバーすると、サブメニューが表示されます。

このコードを使って、自分のウェブサイトにドロップダウンメニューを追加してみてください。

\ シェアしてね！ /

関連記事