純粋な CSS を使用してナビゲーション バーのドロップダウン メニュー効果を実装する方法

純粋な CSS を使用してナビゲーション バーのドロップダウン メニュー効果を実現する方法

Web デザインでは、ナビゲーション バーは非常に一般的なコンポーネントであり、ドロップダウン メニューは-down メニューはナビゲーション バーです。 での一般的な効果です。この記事では、CSS のみを使用してナビゲーション バーのドロップダウン メニュー効果を実装する方法を学び、詳細なコード例を示します。

まず、以下に示すように、基本的なナビゲーション バー構造が必要です。

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item">首页</li>
    <li class="nav-item">产品</li>
    <li class="nav-item dropdown">
      <a href="#" class="dropdown-btn">服务</a>
      <ul class="dropdown-menu">
        <li><a href="#">服务一</a></li>
        <li><a href="#">服务二</a></li>
        <li><a href="#">服务三</a></li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

この構造では、 nav 要素をナビゲーション バーのコンテナとして使用します。ナビゲーション項目のコンテナとして内部に ul 要素が含まれており、各ナビゲーション項目で li 要素を使用します。ドロップダウン メニューを含むナビゲーション項目の場合、特別なクラス名 dropdown とドロップダウン メニュー トリガーの a 要素を追加します。

次に、CSS を使用してドロップダウン メニューの効果を実現します。具体的なコードは次のとおりです:

.navbar {
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  margin-right: 10px;
}

.dropdown {
  position: relative;
}

.dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
}

.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 5px;
}

.dropdown-menu a {
  color: #333;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color: #ccc;
}

この CSS コードでは、最初にナビゲーション バーのスタイルを設定します。 。次に、ドロップダウン メニューのスタイルを設定します。まず、ドロップダウン メニューの display プロパティを none に設定し、デフォルトで非表示になるようにします。次に、.dropdown:hover > .dropdown-menu セレクターを使用して、ドロップダウン メニューを含むナビゲーション項目の上にマウスを置いたときに、ドロップダウン メニューの display プロパティを設定します。 block に、ドロップダウン メニューの表示効果を実現します。

最後に、背景色、間隔、テキストの色など、ドロップダウン メニューのメニュー項目のスタイルを設定しました。

上記の CSS コードと HTML 構造を通じて、単純なナビゲーション バーを実装し、ドロップダウン メニュー効果を追加することに成功しました。フォントサイズや背景色など、必要に応じてスタイルを微妙に調整できます。

要約すると、純粋な CSS を使用してナビゲーション バーのドロップダウン メニュー効果を実現するのは複雑ではなく、単純な HTML 構造と少量の CSS コードだけで完成します。この記事がお役に立てば幸いです。ご質問がございましたら、お気軽にお問い合わせください。

以上が純粋な CSS を使用してナビゲーション バーのドロップダウン メニュー効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。