Hilfe bei einem Dropdown Menü!

Hallo,

ich habe folgendes Menü auf meiner Internetseite eingesetzt und habe ein kleines Problem damit:

http://www.dynamicdrive.com/style/csslibrary/item/jq…

Wenn man etwas schneller die einzelnen Menüpunkte mit der Maus überstreicht, fängt das Menü an zu flackern… es werden dann zuviele events hintereinander abgearbeitet…
Ein paar User haben das bei diesem Menü auch schon festgestellt und folgendes geschrieben:

  1. Implementiere ein .stop() um die Animationswarteschlange nicht zu überfüllen

  2. Stelle eine Abschaltung ein, damit die Menüs für ~1s oder so geöffnet bleiben. Unter den gegebenen Umständen schließt die Mausbewegung 1 Pixel weg von der Unterseite alle Schichten des Menüs, und das kann für die User ziemlich frustrierend sein

An welcher Stelle im Javascript muss ich diese Änderungen vornehmen, ich habe schon mehrere Versuche gestartet, aber ohne Erfolg :frowning:

Bin für jede Hilfe sehr dankbar!!!
Grüße, Thomas

Hallo,

ersetze den Inhalt von droplinemenu.js mal damit:

/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: June 27th, 09’
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

var droplinemenu={

arrowimage: {classname: ‚downarrowclass‘, src: ‚down.gif‘, leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find(„ul“).parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find(‚ul:eq(0)‘)
this._dimensions={h:blush:curobj.find(‚a:eq(0)‘).outerHeight()}
this.istopheader=$curobj.parents(„ul“).length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children(‚a‘).eq(0)
$innerheader=($innerheader.children().eq(0).is(‚span‘))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
‚‘
)
$curobj.hover(
function(e){
var $targetul=$(this).children(„ul:eq(0)“)
if ($targetul.queue().length

Hallo Kampfschlumpf :smile:

danke für deine Antwort und den Lösungsansatz!!!
Ich habe den Code mit deinem Beispiel getauscht und es läuft definitiv schon viel besser :smile: Es gibt nur ab und zu einen Fehler, man kann plötzlich ein oder zwei Menüpunkte nicht mehr aufklappen?!
Wenn man schnell zwischen den Menüpunkten hin und her wechselt, bleibt ein Menüpunkt zu, hast du eine Idee wieso das so ist?

Erstmal tausend Dank für die aktuelle Version :smile:

Grüße, Thomas

Hall ThomasW,

probier mal das hier:

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
//\* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//\* Last updated: June 27th, 09'
//\* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
//\* Improved by Kampfschlumpf
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
 jQuery(document).ready(function($){
 var $mainmenu=$("#"+menuid+"\>ul")
 var $headers=$mainmenu.find("ul").parent()
 $headers.each(function(i){
 var $curobj=$(this)
 var $subul=$(this).find('ul:eq(0)')
 this.\_dimensions={h:blush:curobj.find('a:eq(0)').outerHeight()}
 this.istopheader=$curobj.parents("ul").length==1? true : false
 if (!this.istopheader)
 $subul.css({left:0, top:this.\_dimensions.h})
 var $innerheader=$curobj.children('a').eq(0)
 $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
 $innerheader.append(
 ''
 )
 $curobj.hover(
 function(e){
 var $targetul=$(this).children("ul:eq(0)");

 if (this.istopheader)
 $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this.\_dimensions.h})

 if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
 $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})

 $targetul.stop().slideDown(droplinemenu.animateduration.over) 
 },
 function(e){
 var $targetul=$(this).children("ul:eq(0)")
 $targetul.stop().slideUp(droplinemenu.animateduration.out)
 }
 ) //end hover
 }) //end $headers.each()
 $mainmenu.find("ul").css({display:'none', visibility:'visible', width:blush:mainmenu.width()})
 }) //end document.ready
}
}

Ich habe beim hover die Überprüfung der Länge der Animation-Queue heruasgenommen, weil sie durch das stop() überflüssig wird. (Awesome Denglisch, ich weiß :wink:)

Hihi :smile:

danke für die schnelle Antwort, hab’s gleich mal getestet…
Ist aber immer noch der gleiche Effekt, wenn man mehrfach schnell über die Hauptmenüs mit der Maus geht, öffnen sich ab und zu die Untermenüs nicht mehr oder nur halb. Sowohl im Firefox als auch im IE…
Macht man es lang genug, geht gar kein Untermenü mehr, als ob er sich irgendwas merkt oder ein Überlauf stattfindet?!
Was mich wundert, nur durch Aktualisieren des Browsers oder durch den Wechsel auf eine andere Unterseite wird diese Blockade gelöst und das Untermenü öffnet sich wieder…

Danke im Voraus,
Thomas