Schritte zum Implementieren des Dropdown-Menüeffekts einer responsiven Navigationsleiste mithilfe von reinem CSS

Schritte zum Implementieren des Dropdown-Menüeffekts einer responsiven Navigationsleiste mit reinem CSS

Heutzutage, mit der Beliebtheit mobiler Geräte, ist responsives Design zu einem wichtigen Faktor im Webdesign geworden. Um ein besseres Benutzererlebnis zu bieten, ist es beim Design der Navigationsleiste von Webseiten normalerweise erforderlich, Dropdown-Menüs zu verwenden, um mehr Navigationsoptionen anzuzeigen. In diesem Artikel wird anhand konkreter Codebeispiele erläutert, wie Sie mithilfe von reinem CSS den Dropdown-Menüeffekt einer responsiven Navigationsleiste implementieren.

<li>HTML-Struktur erstellen
Zuerst müssen wir eine grundlegende HTML-Struktur erstellen, einschließlich des Containers der Navigationsleiste und des Navigationsmenüs. Im Navigationsmenü verwenden wir <ul></ul> und <li>, um Menüelemente zu erstellen, während das Dropdown-Menü einen <ul> </ul> ist in einem <li> verschachtelt. <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

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

Grundlegende Stile festlegen
Als nächstes müssen wir einige grundlegende Stile für die Navigationsleiste und die Menüelemente festlegen. Wir können flexbox verwenden, um Menüelemente horizontal anzuordnen und Lücken zwischen Menüelementen zu schaffen. <li>


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');
  });
});

Definieren Sie das Verhalten beim Klicken auf das Dropdown-Menü
Durch die CSS-Pseudoklasse :hover können wir den Effekt der Anzeige des Dropdown-Menüs erzielen wenn sich die Maus über dem Menüpunkt befindet. Auf Mobilgeräten können wir JavaScript verwenden, um ein Klickereignis hinzuzufügen, um die Anzeige und das Ausblenden des Dropdown-Menüs umzuschalten.

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

🎜🎜Responsives Design🎜Um uns an verschiedene Bildschirmgrößen anzupassen, müssen wir das Layout der Navigationsleiste an unterschiedliche Ansichtsfensterbreiten anpassen. Hier ist ein Beispiel für einen Stil für mobile Geräte, bei dem die Breite des Ansichtsfensters weniger als 768 Pixel beträgt, die Menüelemente ausgeblendet werden und eine Schaltfläche zum Öffnen oder Schließen des Menüs verwendet wird. 🎜🎜rrreeerrreee🎜Durch die oben genannten Schritte haben wir den Dropdown-Menüeffekt der rein auf CSS reagierenden Navigationsleiste erfolgreich implementiert. Bei kleiner Bildschirmbreite werden Menüelemente automatisch ausgeblendet und Schaltflächen können zum Öffnen oder Schließen des Menüs verwendet werden. Wenn Sie mit der Maus über einen Menüpunkt mit einem Dropdown-Menü fahren, wird das Dropdown-Menü automatisch angezeigt. Diese Implementierung ist einfach und effizient, basiert nicht auf JavaScript und eignet sich für verschiedene Webprojekte. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜

Das obige ist der detaillierte Inhalt vonSchritte zum Implementieren des Dropdown-Menüeffekts einer responsiven Navigationsleiste mithilfe von reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!