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

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

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

<li>HTML 構造の作成
まず、ナビゲーション バーやナビゲーション メニューのコンテナを含む、基本的な HTML 構造を作成する必要があります。ナビゲーション メニューでは、<ul></ul> と <li> を使用してメニュー項目を作成しますが、ドロップダウン メニューでは <ul>## を使用します。 </ul># <li> にネストされています。

<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>

基本スタイルの設定<li>次に、ナビゲーション バーとメニュー項目の基本スタイルを設定する必要があります。
flexbox を使用すると、メニュー項目を水平に配置し、メニュー項目間に隙間を作ることができます。

.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;
}

ドロップダウン メニューをクリックする動作を定義します<li>CSS 疑似クラスを介して
:hoverマウスを押したときにドロップダウン メニューを表示できます。メニュー項目「効果」の上にカーソルを置きます。モバイル デバイスでは、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');
  });
});

レスポンシブ デザイン<li>さまざまな画面サイズに適応するには、さまざまなビューポート幅でナビゲーション バーのレイアウトを調整する必要があります。以下は、ビューポートの幅が 768 ピクセル未満で、メニュー項目を非表示にし、ボタンを使用してメニューを開閉するモバイル デバイス用のスタイルの例です。


@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 サイトの他の関連記事を参照してください。