Ce tutoriel expliquera étape par étape comment utiliser JQuery et CSS pour créer un menu dynamique sympa. La fonctionnalité « écrire moins, faire plus » de jQuery est bien connue de tous. Même les personnes sans expérience approfondie en programmation JS peuvent rapidement apprendre à l'utiliser grâce à l'API qu'elle fournit. Bien sûr, si vous êtes expérimenté, je le recommande quand même. vous pouvez comprendre les principes de mise en œuvre de chaque fonction principale de jQuery. Ne parlons pas d'autres choses. Voyons simplement comment l'utiliser pour obtenir l'effet magique du menu.
.jpg)
Vous pouvez cliquer pour voir la démo ou télécharger le code source .
Étape 1 - Structure HTML
Jetez un œil au code HTML du menu. Il n'est pas différent du code de menu normal :
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">Accueil</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Ressources</a></li>
<li><a href="javascript:;">Tutoriels</a></li>
<li><a href="javascript:;">À propos</a></li>
</ul>
</div>
La clé est d'utiliser des scripts pour créer plusieurs calques distincts dans chaque point d'ancrage (un élément), afin qu'ils puissent être contrôlés pour s'animer séparément lorsque la souris est survolée. Pour ce faire, nous devons modifier la structure du DOM lors du chargement du DOM afin que chaque code d'ancrage devienne le suivant :
<a href="javascript:;">
<span class="out">Accueil</span>
<span class="bg"></span>
<span class="over">Accueil</span>
</a>
Le contenu de chaque point d'ancrage d'origine sera ajouté à deux éléments span (.out et .over), et l'autre élément span (.bg) est le calque d'image d'arrière-plan.
Quant à la façon de modifier la structure DOM, le code JS sera expliqué à l'étape 3.
Étape 2 - Style CSS
Dans l'exemple, deux styles sont affichés, un avec une image d'arrière-plan et un sans image d'arrière-plan (voir la démo pour plus de détails). Vous pouvez également personnaliser librement votre propre style pour concevoir un menu plus cool. Voici les styles de base et les explications. :
/* Ce qui suit est le style de base du menu
*/.menuulli{
flotteur : gauche ;
/* Le contenu du sous-élément de menu est au-delà de la visibilité */
débordement : caché ;
/* Certains codes sont omis ci-dessous*/
}
.menu ul li a {
/* Doit être un positionnement relatif */
position : relative ;
affichage : bloc ;
largeur : 110 px ;
/* Certains codes sont omis ci-dessous*/
}
.menu ul li une span {
/* Tous les calques utiliseront le positionnement absolu */
position : absolue ;
gauche : 0 ;
largeur : 110 px ;
}
.menu ul li a span.out {
haut : 0px ;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* Initialement, le calque .over et le calque .bg sont à -45px par rapport à l'élément a pour obtenir l'effet caché*/
haut : -45px ;}/
*Ce qui suit est un exemple d'utilisation d'une image d'arrière-plan*/
#menu {
/*Arrière-plan du menu*/
background:url(bg_menu.gif) scroll 0 -1px répéter-x ;
bordure : 1px solide #CCC ;}
#menu ul li a {
couleur : #000 ;
}
#menu ul li a span.over {
couleur : #FFF ;
}
#menu ul li span.bg {
/* Spécifiez la hauteur et l'image d'arrière-plan*/
hauteur : 45px ;
arrière-plan : url(bg_over.gif) centre centre sans répétition ;
}
Vous pouvez également personnaliser le style CSS vous-même, et une version simplifiée du style est également fournie ici ( voir la démo )