Ich brauche bitte Hilfe beim jQuery-Menü

  • Guten Tag zusammen!
    Seit Wochen bastel ich an einem Menü für meine neue HP. Ich habe mir ein fertiges Script runtergeladen und meine Wünschen angepasst.
    Jedoch habe ich noch bei 2 Sachen ein Problem und bis jetzt konnte mir keiner Helfen.
    Vorweg muss ich sagen, das mein Englisch gerade mal für das nötigste reicht. Ja ich weiß das hier (wie auch überall anders) mir niemand einen Code schreibt. Aber ich habe die Hoffnung, das mir vielleicht jemand sagen kann, wo ich was ändern muss, damit es funktioniert. Bis jetzt konnte es keiner und ich bin echt verzweifelt. :(
    Hier erstmal mein Menüaufbau:


    Hier das jQuery-Script dazu:

    JavaScript
    <script type="text/javascript" id="demo2-javascript">
    $(document).ready(function() {
    	$("#menue").navgoco({accordion: true});
    });
    </script>



    Und hier noch das dazugehörige CSS:


    Nun zu meinen beiden Problemen:
    1.) Wenn ich auf "A-Wurf" klicke macht sich nicht mehr das darunter liegende Submenü mit den eizelnen Namen auf. Das geht nur wenn ich den "A-Wurf" NICHT verlinke. Ich habe aber schon gesehen, das beides möglich ist.


    2.) Wünsche ich mir, das wenn man auf einen Menüpunkt klickt der optisch so aussieht, als wenn man mit der Maus darüber fährt. Das ging auch, solange bis ich alle Seiten miteinander verlinkt hatte (also ähnlich wie das Problem oben). Der Menüpunkt soll solange markiert bleiben, bis man einen anderen Menüpunkt anwählt. Ich habe es mit a:active und a:focus versucht, aber es geht nicht.


    Hier auch noch der Link zu meinem Testserver wo die HP momentan liegt: http://chinthya.cwsurf.de/


    Nun hoffe ich, das mir hier jemand helfen kann und mag und mir sagt, wo ich was ändern muss damit es geht.
    Schon jetzt ganz lieben DANK!!!


    Gruß Chinthya

  • Zu 1.):
    das ist natürlich theoretisch möglich, aber du brauchst dann zwei seperate Klick-Flächen (eine für den Klick auf Link und eine für das Submenü). Am besten gelingt dir das vermutlich wenn du das a-Element auf seiner ursprünglichen Größe belässt (kein display: block; ) und den entsprechenden click-Handler dann dem umgebenen li-Element zuweist, sodass wenn man direkt auf den Text klickt der Link aufgerufen wird und wenn man auf die umgebende Schaltfläche klickt das Submenü aufgeht. CSS musst du dazu vermutlich dann generell anpassen um das ursprüngliche Aussehen wieder zu bekommen.


    Zu 2.):
    :focus wird getriggert wenn du das Element mit der Tastatur und TAB fokussierst, :active genau in dem Moment wo du auf einen Link klickst, sobald der Link-Klick abgehandelt ist, trifft :active nicht mehr. Was du also brauchst ist zum Beispiele eine Klasse .active, die dem entsprechenden Element auf Klick zugewiesen wird und dann per CSS gestyled wird.

  • Zu 1.):
    das ist natürlich theoretisch möglich, aber du brauchst dann zwei seperate Klick-Flächen (eine für den Klick auf Link und eine für das Submenü). Am besten gelingt dir das vermutlich wenn du das a-Element auf seiner ursprünglichen Größe belässt (kein display: block; ) und den entsprechenden click-Handler dann dem umgebenen li-Element zuweist, sodass wenn man direkt auf den Text klickt der Link aufgerufen wird und wenn man auf die umgebende Schaltfläche klickt das Submenü aufgeht. CSS musst du dazu vermutlich dann generell anpassen um das ursprüngliche Aussehen wieder zu bekommen.


    Zu 2.):
    :focus wird getriggert wenn du das Element mit der Tastatur und TAB fokussierst, :active genau in dem Moment wo du auf einen Link klickst, sobald der Link-Klick abgehandelt ist, trifft :active nicht mehr. Was du also brauchst ist zum Beispiele eine Klasse .active, die dem entsprechenden Element auf Klick zugewiesen wird und dann per CSS gestyled wird

    Erstml ganz herzlichen Dank für Deine Antwort!


    Zu 1.) Da muss ich mal sehen ob ich das alleine schaffe. Da ich ja eben leider, wie oben schon gesagt, sehr schlecht Englisch kann und ich mit dem Script auch nicht sooo gut klar komme. Hast Du für mich evtl. einen Tipp wie ich was ändern muss?
    Aber eins verstehe ich trotzdem nicht: Wenn die "#" drin steht geht das, wenn ich die "#" durch den richtig Link ersetzte geht das nicht mehr.


    Zu 2.) Wenn ich die Klasse vergebe muss das dann doch aber auch im Script stehen, oder? Ich habe dazu mal folgenden Code gefunden:

    JavaScript
    onClickAfter: function(e, submenu) {
            			e.preventDefault();
            			$('#demo1').find('li').removeClass('active');
            			var li =  $(this).parent();
            			var lis = li.parents('li');
            			li.addClass('active');
            			lis.addClass('active');
            		},
            	});


    Ich habe auch meinem Menü die Klasse vergeben. Aber trotzdem hat das nicht geklappt. Habe ich das evtl. an eine falsche Stelle gesetzt? Oder ist vielleicht so der Code nicht richtig funktionsfähig?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!