jQuery Dropdownmenü "click" zuklappen

the_zoker_09

Kannst du mir nicht noch ein bisschen helfen?

Tobse

http://de.selfhtml.org/javascript/index.htm Lies dich hier ein. Wenn du dann beim umsetzen weitere probleme hast, helfe ich dir gerne weiter.

synaptic

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

<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>

Alles anzeigen

the_zoker_09

Ja das Dropdownmenü schließt sich sofort wieder, wenn man es öffnet.

Tobse

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".

Teron Gerofied

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

Tags