2010-11-29 3 views
2

Hallo Leute, ich frage mich, wie man das Elternmenü beim Bewegen der Maus in den Untermenüs schwebt.Wie Sie das Elternmenü schweben lassen, während sich die Maus im Kindermenü in einem Dropdown-Menü befindet

Ich bin ein Anfänger in jQuery und ich mag es, dass Sie mir mit einem Tipp/Vorschlag helfen.

LINK TO MENU WEBSITE

jQuery-Code

// Navigation Slide // 
var navHover = function() { 
    $("#S" + this.id).animate({top: '-40px'}, 300, 'swing') 
    $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing') 
    $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing') 
} 
var navRelease = function() { 
    $("#S" + this.id).animate({top: '-130px'}, 300, 'swing'); 
} 

$('#navInside a.topLevel').hover(navHover, navRelease); 


// Dropdown animation  
      function mainmenu(){ 
      jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix 
      jQuery(" #navInside li").hover(function(){ 
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500); 
        },function(){ 
        jQuery(this).find('ul:first').css({visibility: "hidden"}); 
        }); 
      } 

      jQuery(document).ready(function(){     
       mainmenu(); 
      }); 

Navigation HTML

<div id="navInside"> 
<li><a class="topLevel" href="">Home</a></li> 
<li><a class="topLevel" href="">Options</a> 
    <ul> 
     <li><a href="">Submenu 1</a></li> 
     <li><a href="">Submenu 2</a></li> 
    </ul> 
</li> 
<li><a class="topLevel" href="">Thanks</a></li> 

+0

nettes Menü! Könntest du das relevante HTML, CSS und JQuery hier oder als Geige posten, damit wir dir besser helfen können? –

+0

Ok ich füge den Code ^^ hoffe es hilft dir ^^ danke – Omegakenshin

Antwort

1

Das Problem ist, dass Ihre Top-Level schweben auf dem <einem> Element ist. Der Wechsel zu einem Untermenü führt dazu, dass das mouseleave-Ereignis auf dem Element 10 a > ausgelöst wird, da die Untermenüelemente keine untergeordneten Elemente der <a>, sondern der li > sind. Versuchen Sie stattdessen:

$('#navInside a.topLevel').parent().hover(navHover, navRelease); 

BTW - Sie Ihr mit Hilfe des $ (this) in den Hover-Funktionen navHover/navRelease Code vereinfachen kann. Auf diese Weise benötigen Sie keine spezifischen IDs für die Elemente. Sie würden sie nur relativ zum aktuellen Element finden.

+0

Danke für die Antwort, ich habe ein kleines Problem, aber Umzug der ID hat es behoben ^^ – Omegakenshin

0

Sie brauchen JS dafür überhaupt nicht. Hier ist die jsFiddle für die Erklärung unten:

Sie möchten eine ul zeigen, die das Kind einer li nur ist, wenn Sie darüber schweben. Das wird von li ul (Mouseout-Status) und li:hover ul (Mouseover-Status) behandelt.

Wenn Sie den Mauszeiger darüber bewegen, ändert sich die Höhe der LI, da Sie jetzt auch den UL anzeigen, sodass er so lange sichtbar bleibt, wie Sie den Bereich (LIS) nicht verlassen + UL).


Wenn Sie einige Animationen möchten, betrachten Sie CSS-Übergänge. Die Browser-Unterstützung ist nicht sehr umfangreich, aber möglicherweise wird das, was Sie versuchen, universell unterstützt. Genaue Entscheidung über mouseover/out Ereignisse auf Elementen, deren Bereich sich ändert, kann schwierig sein. Ich würde empfehlen, JS nur zu verwenden, wenn Sie wirklich für so etwas brauchen.

+0

das Problem ist mit der Animation der grünen Schieberegler – Omegakenshin