un menu deroulant avec jquery
Par aurelien gerits le jeudi, janvier 18 2007, 14:28 - programmation - Lien permanent
Un menu déroulant simple avec jquery est un vrai jeu d'enfant ,la mise en place ce fais avec un script de 5 lignes
suivi de class et ID pour la mise en place.
le code que je vous propose ajoute un effect au passage de la souris en dévoilant des liens cacher
le code jquery :
Strict Standards: is_a(): Deprecated. Please use the instanceof operator in /homez.218/clashdes/clashdesign.net/blog/plugins/dcGeshi/geshi/css.php on line 204
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
la css pour plus de faciliter :
/* Navigation */
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav {
font-family: Arial, Helvetica, sans-serif;
z-index: 100;
position: relative;
}
.nav li {
border-left: 1px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font: bold 1.22em/25px Arial, Helvetica, sans-serif;
background: #565656;
color: #959595;
display: block;
padding: 0 9px;
text-transform: lowercase;
text-decoration: none;
}
.nav li a:hover {
background: #ccc;
color: #000;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
background: #ccc;
color: #000;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
background: #565656;
color: #959595;
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
background: #ccc;
color: #000;
}
.nav ul {
background: #565656;
border-bottom: 1px solid #000;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 25px;
}
.nav ul li {
border: 0;
float: none;
}
.nav ul a {
border: 1px solid #000;
border-bottom: 0;
padding-right: 20px;
width: 80px;
white-space: nowrap;
}
.nav ul a:hover {
background: #ccc;
color: #000;
}

Commentaires
il existait un exemple mais il est hors ligne pour l'instant.
je pense le remettre très bientôt
ca c est la meilleur!!