Maison >interface Web >js tutoriel >Comment créer un menu déroulant dynamique en utilisant HTML, CSS et jQuery

Comment créer un menu déroulant dynamique en utilisant HTML, CSS et jQuery

王林original: 2023-10-25 12:28:571493parcourir

Avec le développement continu de la technologie Web, les menus déroulants dynamiques sont devenus l'un des éléments communs de la conception Web moderne. Il offre une meilleure expérience utilisateur et des capacités de navigation. Dans cet article, nous apprendrons comment créer un menu déroulant dynamique en utilisant HTML, CSS et jQuery, avec quelques exemples de code concrets.

Structure HTML
Tout d’abord, construisons la structure HTML de base. Voici un exemple simple :

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

Styles CSS
Ensuite, nous devons utiliser des styles CSS pour définir l'apparence du menu déroulant. Voici un exemple simple :

/* 清除默认样式 */
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;
}

Effets jQuery
Enfin, nous devons ajouter quelques effets interactifs à l'aide de jQuery. Une simple fonction de survol est utilisée ici pour afficher et masquer les sous-menus :

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

Conclusion
Grâce aux étapes ci-dessus, nous avons réussi à créer un menu déroulant dynamique. Lorsque la souris passe sur le Menu 4, le sous-menu s'affichera. Le sous-menu disparaît lorsque la souris est éloignée. Cet exemple simple peut aider les débutants à comprendre comment utiliser HTML, CSS et jQuery pour créer des menus déroulants dynamiques.

Pour résumer, créer un menu déroulant dynamique nécessite les étapes suivantes : créer une structure HTML, utiliser des styles CSS pour définir l'apparence et utiliser jQuery pour ajouter des effets interactifs. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css html

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML, CSS et jQuery : créez un carrousel avec un effet de fonduArticle suivant：HTML, CSS et jQuery : créez un carrousel avec un effet de fondu

Articles Liés

Voir plus