27-02-2008, 08:21 PM
En fait, le problème que tu exposes vient de la structure de ton menu, l'imbrication des balises empêche de sélectionner directement ce que l'on veut et complique le code.
Avec cette structure
Avec cette structure
Code PHP :
<?php
<ul id="menu">
<li id="menu-seelies"><a href="">Seelies</a>
<ul id="ssmenu-seelies">
<li><a href="">About Seelies</a></li>
<li><a href="">Preferences</a></li>
<li><a href="" class="disabled">Login</a></li>
<li><a href="" class="disabled">Logout</a></li>
</ul>
</li>
<li><a href="">Home</a></li>
<li id="menu-display"><a href="">Display</a>
<ul id="ssmenu-display">
<li><a href="">List</a></li>
<li><a href="">Thumbnail</a></li>
</ul>
</li>
<li id="menu-news"><a href="">News</a>
<ul id="ssmenu-news">
<li><a href="">Suscribe to newsletter</a></li>
<li><a href="">Unsuscribe</a></li>
</ul>
</li>
</ul>
Ce plugin te donnera exactement ce que tu souhaites, je te laisse evidemment refaire tes css en conséquence.
Code PHP :
<?php
(function($){
$.fn.SeeliesMenu = function(o){
var defaults = {
hoverClass : "menuHover",
delay : 500,
animation : {opacity:"show",height:"show"},
c_animation : {opacity:"hide",height:"hide"},
speed : "normal"
},
over = function(){
var $$ = $(this);
clearTimeout(this.sfTimer);
if (!$$.is("."+o.hoverClass)) {
$$.addClass(o.hoverClass)
.find("ul")
.animate(o.animation,o.speed)
.end()
.siblings()
.removeClass(o.hoverClass);
}
},
out = function(){
var $$ = $(this);
this.sfTimer=setTimeout(function(){
$$.removeClass(o.hoverClass)
.find("ul", this)
.animate(o.c_animation,o.speed);
},o.delay);
};
o = $.extend(defaults, o || {});
var menuHovAr=$("li",this)
.hover(over,out)
.find("a").each(function() {
var $a = $(this), $li = $a.parents("li");
$a.focus(function(){ $li.each(over); })
.blur(function(){ $li.each(out); });
}).end();
return this;
};
})(jQuery);
$(document).ready(function(){
$("#menu li ul").hide();
$("#menu").SeeliesMenu();
});