• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Onclick statt mouseover

T

the_zoker_09

Mitglied
Hallo zusammen,
Ich habe ein Script für ein Dropdownmenü im Internet gefunden.

Nur möchte ich nicht, dass sich dieses Dropdownmenü öffnet, wenn man mit der Maus drüber fährt, sondern, wenn man drauf klickt.

Hier ist der Code:
Code: 
/*********************
//* 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(menuid, arrowsvar){
    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={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.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    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)
                },
                function(e){
                    $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
                }
            ) //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("myjquerymenu", arrowimages)

Was muss ich jetzt an der Datei verändern, damit sich das Dropdownmenü bei einem Klick darauf öffnet?

Vielen Dank
the_zoker_09
 
OK das geht :D
kann ich das ganze auch wie einen Link behandeln, der dann diese Aktion auslöst?
Also damit statt der normalen Maus, die "link" Hand angezeigt wird?

Und noch ein Problem: Wenn ich einmal draufgeklickt habe, geht es nicht mehr weg.
 
Die Maus kann man per CSS zur Hand machen. Stichwort "cursor".

Ja, Rückgängig geht es nun nicht mehr. Ist ja auch für hover gedacht gewesen. Um es auch Rückgängig zu machen, müsstest Du diese Funktion innerhalb von click() entsprechend ergänzen.
 
wie würde die lauten? (ohne dich jetzt zu überanstrengen ;) )

Also ich möchte:

Code: 
click: Dropdownliste erscheint
 |-> click: Dropdownliste verschwindet
 |-> click irgendwo anders hin: Dropdownliste verschwindet auch

Ich hab schon gesucht, aber ich verstehe ehrlich gesagt nicht, wie das Script aufgebaut ist.
Ich weiss, dass ich diese Aktionen in dem click reinschreiben muss, aber wo und welche variablen muss ich verändern?

Und wie kann ich das mit dem "click irgendwo anders hin" machen?

Vielen Dank
the_zoker_09
 
Zuletzt bearbeitet:
Im Prinzip musst Du ja nur prüfen ob ein Klick-Event auf irgendein Element statt gefunden hat.

Bin mir nicht sicher ob so ein Selektor möglich is...

HTML: 
<ul>
    <li id="subMenu"><a>Submenu</a>
        <ul>
            <li><a>bla</a></li>
        </ul>
    </li>
</ul>

PHP: 
$('*').click(function() {
    // die id des angeklickten elementes ermitteln
    var id = $(this).attr('id');

    if (id != 'subMenu') {
        $('#subMenu').fadeOut(1000);
    }
});
 
the_zocker_09 schrieb:
Was meinst du mit Demo Seite?
Zum Vergrößern anklicken....

Eine vollständige HTML-Seite, die die Funktionalität enthält. Du hast bisher nur den Code des jQuery-Plug-ins gepostet, wenn ich nichts übersehen habe.

Wenn wir den jetzt anpassen sollen, müssten wir uns, um die Anpassungen zu testen, erst mal alle kompliziert ein HTML-Grundgerüst zusammenzimmern. Darauf habe ich nicht so die Lust.

Klar, man kann das vielleicht auch theoretisch machen. Aber es ist doch immer ganz gut, überprüfen zu können, ob eine Idee auch praktisch funktioniert.
 
Ok nachdem das jetzt alle geklärt ist, nochmal zu meiner Frage vom Anfang:
Wie schaffe ich es, dass das Dropdownmenü wieder geschlossen wird?

Code: 
Also wenn der User auf den gleichen Link klickt -> schließen
Wenn der User irgendwo anders auf die Seite klickt -> schließen
Wenn der User auf ein anderes Dropdownmenü klickt -> schließen

Bei der ganzen Sache geht es um ein Forum, bei dem sich ein Dropdownmenü öffnen soll, wenn man auf den Namen (Link) des Beitrag Erstellers klickt. (Also stell euch vor ihr klickt hier rechts <-- auf meine Namen und dann erscheint ein Dropdownmenü und ihr wollt doch, dass sich das auch wieder schließt wenn ihr nochmal drauf klickt oder eben irgendwohin [wie beim Windows "Start" Knopf])
Vielleicht fällt es euch dann leichter, zu verstehen, was die ganze Sache soll :D

Vielen Dank
the_zoker_09

edit: So sieht das Dropdownmenü im Forum aus: http://test.crystalblood.de/Test/
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben