Heim >Web-Frontend >js-Tutorial >So erstellen Sie ein dynamisches Dropdown-Menü mit HTML, CSS und jQuery

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

王林Original: 2023-10-25 12:28:571520Durchsuche

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>

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

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

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!

jquery css html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML, CSS und jQuery: Erstellen Sie ein Karussell mit einem Fade-EffektNächster Artikel：HTML, CSS und jQuery: Erstellen Sie ein Karussell mit einem Fade-Effekt

In Verbindung stehende Artikel

Mehr sehen