Aujourd’hui je vous propose un petit tutoriel qui vous permettra de réaliser en quelques minutes un menu déroulant JQuery pour votre site internet.
Ce menu déroulant, aussi minimaliste soit-il, vous permettra de répondre à la plupart de vos besoins. Avec quelques adaptation css, ce menu déroulant se fondra à merveille dans votre header.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ul id="nav"> <li> <a href="#">Menu 1</a> <div> <ul> <li><a href="#">Sous Menu 1-1</a></li> <li><a href="#">Sous Menu 1-2</a></li> </ul> </div> </li> <li> <a href="#">Menu 2</a> <div> <ul> <li><a href="#">Sous Menu 2-1</a></li> <li><a href="#">Sous Menu 2-2</a></li> </ul> </div> </li> </ul> |
ul#nav { display:inline; float:left; } ul#nav li { float:left; list-style-type:none; margin:0 10px; position:relative; } ul#nav div { display:none; float:left; position:absolute; } ul#nav li ul { margin:0; padding:0; } ul#nav li ul li { margin:0px; width:150px; } |
$(document).ready(function() { $("#nav > li").mouseover(function(e) { $(this).children("div").show(); }); $("#nav > li").mouseout(function(e) { $(this).children("div").hide(); }); }); |
Bonjour, le script est bien sauf que tout le monde oublie de prendre en considération le niveau de la div qui s’affiche. il faut ajouter la propriété z’index à la div qui s’affiche pour qu’elle soit au dessus des autres éléments de la page, sinon au dessous. Merci
Merci grandement pour cet article, c’est vraiment très clair et très utile
!