jQuery menu animé # fonction vol stationnaire()

Question

J'ai un menu horizontal, qui est animé par JQuery:

http://jsfiddle.net/BTD2F/5/

Le problème (s): I a avoir un élément parent 'courant', son ul doit être montré. Si je survole un autre élément parent, le ul qui est actuellement affiché doit être caché. Celui qui forme l'objet hoverd doit être montré et disparaître si le hover() est 'finsihed'. Tout cela ne fonctionne pas, comme il se doit. Vous pouvez voir le code sur jsfiddler. S'il vous plaît essayer de planer «Moda» et vous verrez le problème.

Merci beaucoup à l'avance, Lars

Answer 1

 jQuery("#headnav_primary .top-item").hover(

    function(){ 

     jQuery('.current-menu-item ul').hide('fast'); 
     jQuery(this).find('ul').show('slow'); 

     },  
     function() { 
     jQuery(this).find('ul').hide('fast'); 
      }); 

'top-item' Ajouter une classe à vos liens d'en-tête de li.

Answer 2

Selon les navigateurs dans lesquels vous avez besoin de travailler, il existe plusieurs approches pour faire apparaître les sous-menus.

Vous pouvez remplacer le code JavaScript jQuery par ce qui suit, qui masque simplement tous les sous-menus lorsqu'un <li> est entré et affiche le sous-menu <li> actuel.

var subMenus = $("#headnav_primary li ul"); 

$("#headnav_primary li").mouseenter(function() { 
    subMenus.hide(); 
    $(this).children('ul').show('slow'); 
}).mouseleave(function() { 
    subMenus.hide('fast'); 
}); 

Ou supprimez tout le JavaScript complètement et il suffit d'ajouter ce une règle simple CSS qui affiche le sous-menu lorsque le parent <li> est plané.

#headnav_primary li:hover ul { 
    display:block !important; 
} 

Note: Cela ne fonctionnera pas dans les anciens navigateurs, en particulier IE6. En outre, j'ai ajouté !important parce que vous avez actuellement ajouté style="display:none" sur les sous-menus qui a priorité. Si vous supprimez le style en ligne, vous pouvez supprimer le !important.

Edit: est ici a better demo que ne utilise les CSS. Cela ne fonctionnera pas dans IE6 car il ne prend en charge que :hover sur points d'ancrage. Si vous avez besoin du support d'IE6, je peux mettre à jour, mais j'utiliserai jQuery.