純粋な CSS を使用してレスポンシブナビゲーションバーのドロップダウンメニュー効果を実装する手順-CSSチュートリアル-php.cn

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

WBOY

リリース： 2023-10-19 08:42:26

オリジナル

1396 人が閲覧しました

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

現在、モバイルデバイスの人気により、レスポンシブデザインが主流になっています。 Web デザインは重要な要素です。 Web ページのナビゲーションバーのデザインでは、より良いユーザーエクスペリエンスを提供するために、通常、ドロップダウンメニューを使用してより多くのナビゲーションオプションを表示する必要があります。この記事では、純粋な CSS を使用してレスポンシブナビゲーションバーのドロップダウンメニュー効果を実装する方法を、具体的なコード例とともに紹介します。

<ul></ul>

<li>

<ul>## を使用します。 </ul>

にネストされています。

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

ログイン後にコピー

 を使用すると、メニュー項目を水平に配置し、メニュー項目間に隙間を作ることができます。

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

.nav-menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 10px;
}

.with-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  padding: 10px;
}

.dropdown-item {
  padding: 10px;
}

ログイン後にコピー

マウスを押したときにドロップダウン メニューを表示できます。メニュー項目「効果」の上にカーソルを置きます。モバイル デバイスでは、JavaScript を使用してクリック イベントを追加し、ドロップダウン メニューの表示と非表示を切り替えることができます。

.with-dropdown:hover .dropdown {
  display: block;
}

ログイン後にコピー

var dropdowns = document.querySelectorAll('.with-dropdown');
dropdowns.forEach(function (dropdown) {
  dropdown.addEventListener('click', function () {
    this.classList.toggle('active');
    var dropdownMenu = this.querySelector('.dropdown');
    dropdownMenu.classList.toggle('open');
  });
});

ログイン後にコピー

@media screen and (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    display: none;
    padding: 10px;
  }

  .navbar.open .nav-item {
    display: block;
  }

  .navbar-button {
    display: block;
    background-color: #f8f8f8;
    border: none;
    padding: 10px;
    cursor: pointer;
  }
}

ログイン後にコピー

<nav class="navbar">
  <button class="navbar-button">菜单</button>

  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

ログイン後にコピー

上記の手順により、純粋な CSS 応答ナビゲーションバーのドロップダウンメニュー効果を正常に実装できました。画面幅が狭い場合、メニュー項目は自動的に非表示になり、ボタンを使用してメニューを開閉できます。ドロップダウンメニューのあるメニュー項目の上にマウスを移動すると、ドロップダウンメニューが自動的に表示されます。この実装はシンプルかつ効率的で、JavaScript に依存せず、さまざまな Web プロジェクトに適しています。この記事がお役に立てば幸いです!

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