So erstellen Sie ein dynamisches Dropdown-Menü mit HTML, CSS und jQuery-js-Tutorial-php.cn

So erstellen Sie ein dynamisches Dropdown-Menü mit HTML, CSS und jQuery

王林

Freigeben： 2023-10-25 12:28:57

Original

1507 Leute haben es durchsucht

So erstellen Sie ein dynamisches Dropdown-Menü mit HTML, CSS und jQuery

Mit der kontinuierlichen Weiterentwicklung der Webtechnologie sind dynamische Dropdown-Menüs zu einem der häufigsten Elemente im modernen Webdesign geworden. Es bietet eine bessere Benutzererfahrung und bessere Navigationsmöglichkeiten. In diesem Artikel erfahren Sie anhand einiger konkreter Codebeispiele, wie Sie mithilfe von HTML, CSS und jQuery ein dynamisches Dropdown-Menü erstellen.

HTML-Struktur
Erstens erstellen wir die grundlegende HTML-Struktur. Hier ist ein einfaches Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>动态下拉菜单</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
      <li class="dropdown">
        <a href="#">菜单4</a>
        <ul class="submenu">
          <li><a href="#">子菜单1</a></li>
          <li><a href="#">子菜单2</a></li>
          <li><a href="#">子菜单3</a></li>
        </ul>
      </li>
      <li><a href="#">菜单5</a></li>
    </ul>
  </nav>
</body>
</html>

Nach dem Login kopieren

CSS-Stile
Als nächstes müssen wir CSS-Stile verwenden, um das Erscheinungsbild des Dropdown-Menüs festzulegen. Hier ist ein einfaches Beispiel:

/* 清除默认样式 */
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 导航菜单样式 */
nav ul.menu li {
  display: inline-block;
  position: relative;
}

nav ul.menu li a {
  display: block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

nav ul.menu li.dropdown:hover .submenu {
  display: block;
}

/* 子菜单样式 */
nav ul.menu li .submenu {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #333;
}

nav ul.menu li .submenu li {
  display: block;
}

nav ul.menu li .submenu li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

Nach dem Login kopieren

jQuery-Effekte
Schließlich müssen wir mit jQuery einige interaktive Effekte hinzufügen. Hier wird eine einfache Hover-Funktion verwendet, um Untermenüs ein- und auszublenden:

$(document).ready(function() {
  $('nav ul.menu li.dropdown').hover(
    function() {
      $(this).find('.submenu').stop().slideDown();
    },
    function() {
      $(this).find('.submenu').stop().slideUp();
    }
  );
});

Nach dem Login kopieren

Fazit
Durch die oben genannten Schritte haben wir erfolgreich ein dynamisches Dropdown-Menü erstellt. Wenn Sie mit der Maus über Menü 4 fahren, wird das Untermenü angezeigt. Das Untermenü verschwindet, wenn die Maus wegbewegt wird. Dieses einfache Beispiel kann Anfängern helfen, zu verstehen, wie man mit HTML, CSS und jQuery dynamische Dropdown-Menüs erstellt.

Zusammenfassend erfordert die Erstellung eines dynamischen Dropdown-Menüs die folgenden Schritte: Erstellen einer HTML-Struktur, Verwenden von CSS-Stilen zum Festlegen des Erscheinungsbilds und Verwenden von jQuery zum Hinzufügen interaktiver Effekte. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein dynamisches Dropdown-Menü mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!