CSS Selektor mit JS setzen?

[Lukas.]

Hallo Forum,

ich bin nicht sicher, ob mein Betreff korrekt ist, aber ich beschreibe mal:

Ich nutze ein Menü, das css-formatiert ist. Aufgeklappt ist immer das Submenü, das in per GET in "current" übermittelt wird.

Da es mir aber unrecht ist, hierfür jedesmal einen neuen Request durchführen zu sollen, würde ich das gerne über ein onclick-Event und JQuery realisieren.

Wie gehe ich am sinnvollsten vor?

Gibt es andere sinnvolle Eventhandler (außer onclick), die auch Tabletgeeignet wären?

Gruß, Lukas

[Jörg Reinholz]

Moin!

Da es mir aber unrecht ist, hierfür jedesmal einen neuen Request durchführen zu sollen, würde ich das gerne über ein onclick-Event und JQuery realisieren.

CSS und Javascript reichen völlig aus.

Jörg Reinholz

[Camping_RIDER]

Aloha ;)

ich bin nicht sicher, ob mein Betreff korrekt ist, aber ich beschreibe mal:

Hm, ich sehe den inhaltlichen Zusammenhang zwischen der Problemschilderung und der Überschrift nicht, aber ob das am Betreff oder an der Problemschilderung liegt, kann ich nicht sicher sagen ;)

Ich nutze ein Menü, das css-formatiert ist. Aufgeklappt ist immer das Submenü, das in per GET in "current" übermittelt wird.

Okay. Ich hab das mal aufgemacht und angeschaut. Durch PHP wird eine Klasse an das Element vergeben, das $_GET["current"] entspricht. So weit, so verständlich.

Da es mir aber unrecht ist, hierfür jedesmal einen neuen Request durchführen zu sollen, würde ich das gerne über ein onclick-Event und JQuery realisieren.

Das kommt ein bisschen darauf an, wie deine Seite nachher aufgebaut sein soll. Soll es auch "Kategorie"-Seiten geben? Oder nur "Unter"-Seiten?

Ich gehe mal von letzterem aus (denn ersteres wäre per onclick so gar nicht sinnvoll zu lösen).

Wie gehe ich am sinnvollsten vor?

Eine Vorgehensweise, die dir a) die bisherige Mechanik als noscript-Fallback erhält und b) für alle mit JavaScript die Mechanik ohne Requests einbaut, wäre beispielsweise folgende:

1.: Listener auf das onload-Event setzen. Dieser tut folgendes:
2.: Kategorienlinks aufspüren und durch neue a-Elemente mit selbem Text aber ohne href ersetzen
3.: neuen a-Elementen einen onclick-Listener verpassen, der tut folgendes:
4.: suchen des Elements mit hasClassName('current'), className current entfernen
5.: hinzufügen von className auf event.target (bzw. this)

Fertig ;)

Da ich nicht weiß, auf welchem Kentnisstand du bist: frag einfach, wenn dir der ein oder andere Punkt nicht klar ist.

Gibt es andere sinnvolle Eventhandler (außer onclick), die auch Tabletgeeignet wären?

Jein. Im Prinzip nicht (imho). Aber zum Punkt tabletgeeignet: Bedenke, dass man deine Navigation erstmal mit dem Finger treffen muss. Also bitte das verlinkte Beispiel nicht 1 zu 1 übernehmen, sondern mindestens in der Größe (a.k.a. Treffbarkeit) verbessern.

Grüße,

RIDER

[Lukas.]

Danke für Deine ausführliche Antwort. Ich sitze gerade daran, habe aber momentan noch eine andere Aufgabe zu erledigen. Ich wollte mich jetzt nur mal kurz rückmelden, weil das sonst so ignorant undankbar aussieht. Ist aber nicht so, ich fand die Antwort sehr gut.

Lukas

[Gunnar Bittersmann]

@@Lukas.

Ich nutze ein Menü, das css-formatiert ist.

Du hast gesehen, dass das Zeugs von 2007 ist? Damals waren Sliding Doors heißer Scheiß.

Heute sind Sliding Doors nicht mehr heiß, sondern nur noch Scheiß. Die Krücke mit 2 Grafiken wird nicht mehr benötigt; das kriegt man mit border-radius und linear-gradient hin.

Du siehst, dass es neben der Vergabe einer Klasse "current" auch die Möglichkeit gibt, den gerade gewählten Menüpunkt nicht zu verlinken, d.h. dem a-Element kein href-Attribut zu geben.

Wenn du mit JavaScript umschalten willst, brauchst du den URI natürlich trotzdem; ich hab ihn deshalb ins data-href-Attribut getan.

LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Heute sind Sliding Doors nicht mehr heiß, sondern nur noch Scheiß. Die Krücke mit 2 Grafiken wird nicht mehr benötigt; das kriegt man mit border-radius und linear-gradient hin.

Ich hab den Pen mal um den jQuery-Code zum Umschalten ergänzt. (CSS auch leicht geändert).

LLAP

[Lukas.]

Ich hab den Pen mal um den jQuery-Code zum Umschalten ergänzt. (CSS auch leicht geändert).

Hi,

Deine Menü verstehe ich leider nicht. Aber ich wollt auch mein Menü nicht komplett ändern, nur weil es heute zeitgemäßer ist, runde Ecken anders darzustellen. Ich darf es nicht zu meinem Thema machen, alles auf dem neuesten technisch machbaren Stand zu halten. Es ist meine Aufgabe, es auf dem technisch notwendigem Stand zu halten, der dem User das heute technisch sinnvolle ermöglicht.

Lukas

[Jörg Reinholz]

Moin!

nur weil es heute zeitgemäßer ist, runde Ecken anders darzustellen ... auf dem technisch notwendigem Stand ... das heute technisch sinnvolle

Das "zeitgemäßere" ist aber vorliegend auch das technisch sinnvollere. Denn es ist unter jeder Perspektive sinnvoll nicht so viele Grafiken zu senden wenn so Sachen wie "runde Ecken" anders sehr viel einfacher und mit geringerem Datentransfer zu realisieren sind.

Jörg Reinholz