|
 Dans cet article, nous allons voir comment réaliser et personnaliser facilement un menu déroulant avec la librairie javascript jquery.
Tutorial Jquery : Menu déroulant simple
Découvrons comment réaliser simplement un menu déroulant (drop down en anglais) grâce à la librairie Jquery 1.3.2 et une pincée de style CSS. Le menu présenté se limite à 2 niveaux de titres (titre > libellés sections), libre à vous d'adapter le code pour définir des niveaux supplémentaires.
Le menu est compatible avec les navigateurs suivants : IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+
Un aperçu du résultat final :
Tout d'abord il faut faire référence à la librairie javascript jquery à utiliser. Contrairement à mon article sur Jquery UI , nous allons ici faire référence à la librairie via le site de google, le visiteur aura ainsi plus de chance d'avoir déjà chargé la librairie dans le cache de son navigateur.
Insérer la ligne suivante entre les balises <head></head> de votre code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
Dans le corps de notre page (entre <body></body>) préparons le squelette du menu déroulant. Rappelons si nécessaire que les balises <ul> et <li> sont les balises HTML à utiliser pour créer un menu et plus généralement une liste.
<ul id="MenuDeroulant">
<li><a href="#">Informatique</a>
<ul>
<li><a target="_blank"href="http://computure.net/fr/articles-informatique/10-csharp">C#</a></li>
<li><a target="_blank" href="http://computure.net/fr/articles-informatique/3-vbaarticles">Excel/VBA</a></li>
<li><a target="_blank" href="http://computure.net/fr/articles-informatique/14-free">Jquery</a></li>
<li><a target="_blank" href="http://computure.net/fr/articles-informatique/14-free">Free</a></li>
<li><a target="_blank" href="http://computure.net/fr/articles-informatique/12-qualitycenter">Quality Center</a></li>
</ul>
</li>
<li><a href="#">Culture</a>
<ul>
<li><a target="_blank" href="/ http://computure.net/fr/articles-culture/6-bd">BD</a></li>
<li><a target="_blank" href="http://computure.net/fr/articles-culture/13-cinema">Cinéma</a></li>
<li><a target="_blank" href="http://computure.net/fr/articles-culture/15-generale">Générale</a></li>
<li><a target="_blank" href="http://computure.net/fr/articles-culture/11-serietv">Série TV</a></li>
</ul>
</li>
<li><a href="#">Voyage</a></li>
<li><a href="#">Boutique</a></li>
<li><a href="#">Contact</a></li>
</ul>
Ajoutons quelques lignes de CSS dans l'entête (entre <head> et </head>) pour définir les styles à appliquer à votre menu. N'hésitez pas à personnaliser le votre en changeant les couleurs, la taille et la police du texte. :
<style type="text/css">
#MenuDeroulant
{
margin: 0;
padding: 0}
#MenuDeroulant li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial // La taille et la police du texte du menu }
#MenuDeroulant li a
{ display: block;
background: #20548E; /* Couleur de fond des titres du menu (bleu foncé) */
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #FFFFFF; // Couleur de police des titres du menu (blanc)
white-space: nowrap}
#MenuDeroulant li a:hover
{ background: #1A4473} /* Couleur de fond des titres du menu au survol de la souris (bleu encore plus foncé) */
#MenuDeroulant li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}
#MenuDeroulant li ul li
{ float: none;
display: inline}
#MenuDeroulant li ul li a
{ width: auto;
background: #9F1B1B} /* Couleur de fond des items déroulant du menu (rouge bordeaux) */
#MenuDeroulant li ul li a:hover
{ background: #7F1616} /* Couleur de fond des items déroulant du menu au survol de la souris(rouge bordeaux encore plus foncé) */
</style>
Enfin, définissons le moteur du menu déroulant avec des fonctions jquery pour animer le CSS et définir le comportement du menu.
<script type="text/javascript">
// Au chargement du document, le code javascript suivant sera exécuté
$(document).ready(
function()
{
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function MenuDeroulant_open()
{ MenuDeroulant_canceltimer();
MenuDeroulant_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function MenuDeroulant_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function MenuDeroulant_timer()
{ closetimer = window.setTimeout(MenuDeroulant_close, timeout);}
function MenuDeroulant_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#MenuDeroulant > li').bind('mouseover', MenuDeroulant_open)
$('#MenuDeroulant > li').bind('mouseout', MenuDeroulant_timer)});
document.onclick = MenuDeroulant_close;
});
</script>
Cet article est tiré du site javascript-array.com (en anglais)
Pour aller plus loin :
17 plugins jquery pour réaliser différents types de menu : http://www.webair.it/blog/2009/01/20/17-must-see-menu-in-jquery/
|
