jQuery combiné avec CSS pour créer un menu déroulant dynamique_jquery

Lorsqu'un grand sous-menu doit être placé dans un espace de menu de navigation limité, nous utilisons généralement un menu déroulant pour compenser le manque d'espace. Cet article vous montrera comment utiliser jQuery et CSS pour créer un menu déroulant dynamique en un minimum de temps.

XHTML
La première chose est d'introduire la bibliothèque jquery dans la partie head de la page, ce qui est nécessaire.

<script type="text/javascript" src="js/jquery.js"></script> 

Ensuite, j'ai utilisé une liste non ordonnée pour construire le menu.

<ul class="menu"> 
  <li><a href="#">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">关于</a></li> 
  <li><a href="#">BLOG</a></li> 
</ul> 

C'est clair en un coup d'œil et semble très simple. Puisque le menu déroulant est fermé au début, je dois également créer un bouton visible qui peut déclencher le menu déroulant. Cet article utilise directement une image comme déclencheur. bouton pour plus de commodité. Et placez l'image en haut de la liste du menu

<img src="nav.gif" width="184" height="32" class="menu_head" /> 

CSS
Créez des styles CSS pour les menus respectivement, veuillez consulter le code :

.menu_head{border:1px solid #998675; background:#f30} 
.menu{display:none; width:184px; border:1px solid #998675; border-top:none} 
.menu li{list-style:none; background:#493e3b} 
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} 
.menu li a:hover{font-weight:bold;} 
.menu li.alt{background:#362f2d;} 

Il convient de noter que le style .menu li.alt est utilisé pour distinguer les lignes paires et impaires et les sauts de ligne, ce qui sera reflété dans le code jquery ci-dessous.
jQuery
Dans le code jQuery, je dois d'abord distinguer les lignes du menu déroulant et donner un style aux lignes paires : alt. Ajoutez ensuite un événement déclencheur de clic pour le bouton image, et le menu déroulant peut être commuté lorsque vous cliquez sur le bouton.

$(function(){ 
  $(".menu li:even").addClass("alt"); 
  $("img.menu_head").click(function(){ 
    $(".menu").slideToggle("fast"); 
  }); 
}); 

Remarque, J'ai utilisé la méthode slideToggle de jQuery pour afficher et masquer le menu de manière coulissante, et l'effet est très fluide.

Ce qui précède est le jQuery partagé combiné avec CSS pour créer un menu déroulant dynamique. J'espère qu'il sera utile à l'apprentissage de chacun.