Maison >interface Web >tutoriel CSS >Comment créer un menu de navigation déroulant avec HTML5, CSS3 et JQuery
Comment créer un menu de navigation déroulant avec HTML5, CSS3 et JQuery
- Christopher Nolanoriginal
- 2025-03-04 09:46:17861parcourir
Ce tutoriel montre la construction d'un menu de navigation déroulant réactif à l'aide de HTML5, CSS3 et JQuery. Nous couvrirons la fonctionnalité HTML Structure, CSS Style et JQuery pour créer une expérience fluide et conviviale.
Configuration du projet:
-
Créer un dossier de projet (par exemple, "Dropdown-Menu"). À l'intérieur, créez trois fichiers:
index.html,style.cssetscript.js. -
Inclure des bibliothèques: Commencez par lier jQuery et Font Awesome in
index.html:
<!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dropdown Menu</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer">
- Structure HTML (
index.html): Créez la structure du menu de navigation:
<div class="header-container">
<div class="logo">
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">LOGO</a>
</div>
<nav>
<ul class="menu">
<li class="nav-item">
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Nav Link 1</a>
<i class="fas fa-arrow-down"></i>
<div class="submenu">
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 1</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 2</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 3</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sub Nav Link 4</a>
</div>
</li>
<!-- Repeat for other Nav Links -->
</ul>
</nav>
</div>
(Répétez la structure <code><li> pour des liens de navigation supplémentaires.)
- CSS Styling (
style.css): Style le menu à l'aide de CSS. Les aspects clés incluent la cachette du sous-ménus, puis les montrent sur le plan de survol:
.submenu {
display: none;
position: absolute;
background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
/* Add your styling here */
}
.nav-item:hover .submenu {
display: block;
}
/* Add more styles as needed */
- Fonctionnalité jQuery (
script.js): Utilisez jQuery pour améliorer l'expérience utilisateur. Cela peut impliquer d'ajouter des animations ou d'améliorer l'accessibilité. (Exemple utilisanttoggleClasspour un effet simple):
$('.nav-item').on('mouseover', function() {
$(this).toggleClass('navActive');
});
Explication:
Le HTML crée une structure de navigation de base avec des éléments imbriqués <div> pour le sous-menus. Le CSS cache initialement le sous-menus, puis utilise la pseudo-classe <code>:hover pour les afficher lorsque l'élément de liste des parents est survenue. Le code jQuery (facultatif) ajoute des fonctionnalités dynamiques, telles que des transitions lisses ou des interactions plus avancées.
N'oubliez pas d'ajuster le code CSS et JQuery pour correspondre à vos préférences de conception et à vos fonctionnalités souhaitées. Cela fournit une base pour créer un menu de navigation déroulant personnalisable et réactif.
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!