Kannst du mir nicht noch ein bisschen helfen?
jQuery Dropdownmenü "click" zuklappen
-
-
http://de.selfhtml.org/javascript/index.htm Lies dich hier ein. Wenn du dann beim umsetzen weitere probleme hast, helfe ich dir gerne weiter.
-
ist ein weiteres mal ungetetstet da ich keine lust hab mir nen html zu generieren!
und für die zukunft, versuch bitte erstmal zu verstehen was du willst, dann was du kannst und am ende wie du dein ziel erreichst!es ist nicht sinn des forums dir jede zeile code vorzukauen, damit du nachher glücklich bist, sondern dass du lernst und kapierst was abgeht.
Code
Alles anzeigen<script type="text/javascript"> /********************* //* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com //* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ //* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/ *********************/ //Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs): var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']} var jquerycssmenu={ fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds buildmenu:function(menu_css, arrowsvar){ jQuery(document).ready(function($){ var $mainmenu=$(menu_css+">ul") var $headers=$mainmenu.find("ul").parent() $headers.each(function(i){ var $curobj=$(this) var $subul=$(this).find('ul:eq(0)') this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0}) $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append( '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1]) +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0]) + '" style="border:0;" />' ) $curobj.click( function(e){ var $targetul=$(this).children("ul:eq(0)") $targetul.addClass('js_myActiveMenu'); this._offsets={left:$(this).offset().left, top:$(this).offset().top} var menuleft=this.istopheader? 0 : this._dimensions.w menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible'}) }) //end document.ready } } //build menu with ID="myjquerymenu" on page: jquerycssmenu.buildmenu(".jquerycssmenu", arrowimages); //schliessen-funktion $(document).bind("click", function(){ $('.js_myActiveMenu').fadeOut(jquerycssmenu.fadesettings.outduration); }); </script>
-
Ja das Dropdownmenü schließt sich sofort wieder, wenn man es öffnet.
-
Die Funktion, die snypatic da definiert (fett markiert):
Code$(document).bind("click", [I][B]function()[/B][/I]{ $('.js_myActiveMenu').fadeOut(jquerycssmenu.fadesettings.outduration); });
Bekommt ein Argument, nämlich ein event. Und was du damit machen kannst, um zu verhindern, dass es sich schließt, verraten dir deine Recherchen über JavaScript und "event bubbling". -
Auf gut Deutsch heißt das: Du sollst verhindern, dass es schließt, wenn man auf den "Menü öffnen" link klickt.
Könnte eingedeutscht so aussehen:
- binde Eventhandler an das document
- rufe dabei eine function, wenn geklickt wurde.
- übergib der Funktion ein paar Infos zu dem Klick ( $(document).bind('click', function(event) )
- Frage: WENN das Element, auf das geklickt wurde die Klasse "menueitem" oder so hat (diese Klasse solltest du logischerweise den Links im Menü zuweisen), dann tue nichts
- SONST schließe das Menü wieder.
Das wars -