Braucht man für eine Navi mit klickbarem Dropdown-Menü JavaScript?

[Martinus33]

Hallo,
es gibt bekanntlich die zwei Möglichkeiten, ein Dropdown-Menü per Klick oder hover ausfahren zu lassen.

Falls man sich für Klick entscheidet und sonst eigentlich kein JavaScript bräuchte auf der Site, muss man dann nur für das Dropdown-Menü JavaScript auf der Site haben, weil die Klick-Öffnung zwingend JS braucht?

Oder geht ein klickbares Dropdown auch ohne JS, nur mit HTML und CSS (möglichst unkompliziert)?

Danke.

 

[Hopsekäse]

https://css-tricks.com/the-checkbox-hack/

 

[netzgestaltung]

Es geht mit HTML/CSS und dem :target pseudoselector anzuwählen. Aber es ist nicht sehr stabil.
Quelle: https://css-tricks.com/on-target/ oder auch: https://www.sitepoint.com/css3-tabs-using-target-selector/

leider gibts da probleme mit dem hüpfen und diverse browser bugs... daher eher nein.

 

[Martinus33]

Ist der Checkbox-Hack auch unstabil oder - wie vermutlich viele "hacks" - mit anderen Nachteilen verbunden? Oft funktionieren z.B. hacks nicht bei allen Browsern.

Es ginge bei mir um eine ganz normale horizontale Header-Navigation mit 7 Links oder genauer gesagt, einer davon wäre kein Link, sondern eben dann der klickbare (oder hoverbare) Menüpunkt, der dann ein DD ausklappt.

Sehe ich den Checkbox-Link richtig, dass da tatsächlich eine Checkbox zu sehen sein muss? Das würde zu meiner horizontalen Header-Navi nicht so gut passen. Ich sehe aber dort auch eine Dropdown-Navigation ohne Checkbox.

 

[User007]

Hi...

Na ja, auch "Checkbox"-Elemente lassen sich ja mittels CSS stylen, evtl. z. B. als Tab oder so.
Aber das auf der Seite etwas weiter unten im Abschnitt Dropdown-Menus Beschriebene entspricht doch genau dem Gesuchten - oder nicht?

 

[Hopsekäse]

Man kann bestimmt auch die Checkbox selbst umstylen. Der übliche weg ist aber sie einfach verschwinden zu lassen. Geklickt und gestyled wird dann das Label, welches über "for" mit der Checkbox verknüpft ist. Die Checkbox selbst muss nicht zu sehen sein, ihr Wert kann trotzdem umgeschaltet werden.
Das funktioniert auf den allermeisten Browsern und auch stabil. Das Verhalten hat aber die Einschränkung, dass das Menü auch nur geschlossen wird, wenn man nochmal drauf klickt (also wo anders hin zeigen/klicken schließt es nicht).

 

[Martinus33]

Hi...

Na ja, auch "Checkbox"-Elemente lassen sich ja mittels CSS stylen, evtl. z. B. als Tab oder so.
Aber das auf der Seite etwas weiter unten im Abschnitt Dropdown-Menus Beschriebene entspricht doch genau dem Gesuchten - oder nicht?

Ja, sagte ich ja. Die Grafik dort ist im Grunde "meine" Navigation, abgesehen von der Kleinigkeit, dass bei mir nur EIN parent item ein Dropdown haben soll (dort sind es alle drei). Weitere Erklärungen speziell zum DD gibt es dort aber nicht.

Ich möchte halt vermeiden, dass ich mich mit einer für mich ganz neuen Technik (label, input) auseinandersetze und am Schluss dann doch merke, dass ich sie nicht einsetzen will/kann, weil es sich z.B. mit dem von mir wohl eingesetzen Grid für die Navi beißt oder ein/zwei relevante (mobile-)Browser das Ganze nicht unterstützen oder ich mein ganzes System mit allen Link-"states" (hover, focus, active usw.) vergessen muss oder oder.

Ich könnte angesichts des überschaubaren, einfachen DD auch mit einem hover-DD leben (beides hat Vor- und Nachteile), aber das scheint für Touchscreens und Screenreader schwieriger zu sein... Wird vielleicht ein eigener Thread...

Komplett ohne JS auszukommen, das ist mein Ziel und würde mich freuen. Da es eine technisch einfache Info-Site ist, sollte das möglich sein.

 

[User007]

Also grundsätzlich ist es natürlich durchaus möglich eine Website ganz ohne JS zu gestalten - praktisch wird's allerdings eher immer mehr durch die heutzutage bis in alle Bequemlichkeit des Nutzers sowie zur Auswertbarkeit aller möglichen Daten eingebauten Funktionalitäten. Das muß halt jeder für den angedachten Use-Case entscheiden.
Und: vom Gedanken ein für alle Browser/Darstellungs-Apps für Endgeräte kompatibles Layout zu programmieren, sollte man sich verabschieden - das ist praktisch nicht realisierbar!
Da muß man eben den Kompromiß der größtmöglichen Abdeckung eingehen - und halt mit leben.

[...] abgesehen von der Kleinigkeit, dass bei mir nur EIN parent item ein Dropdown haben soll (dort sind es alle drei). Weitere Erklärungen speziell zum DD gibt es dort aber nicht.

Na ja, das ist doch aber ziemlich leicht anpassbar - welche Erklärungen werden denn gesucht?

 

[Martinus33]

Also grundsätzlich ist es natürlich durchaus möglich eine Website ganz ohne JS zu gestalten - praktisch wird's allerdings eher immer mehr durch die heutzutage bis in alle Bequemlichkeit des Nutzers sowie zur Auswertbarkeit aller möglichen Daten eingebauten Funktionalitäten. Das muß halt jeder für den angedachten Use-Case entscheiden.
Und: vom Gedanken ein für alle Browser/Darstellungs-Apps für Endgeräte kompatibles Layout zu programmieren, sollte man sich verabschieden - das ist praktisch nicht realisierbar!
Da muß man eben den Kompromiß der größtmöglichen Abdeckung eingehen - und halt mit leben.


Na ja, das ist doch aber ziemlich leicht anpassbar - welche Erklärungen werden denn gesucht?

Was JS angeht, da mache ich mir weniger Sorgen. Es ist wie gesagt eine einfache Info-Site, Text mit Bildern. Keine Formulare, Anwendungen oder Auswertungen. Irgendwann werden mal YT-Videos verlinkt, aber eben auch nur verlinkt, nicht bei mir gehostet. Ich werde CSS Grid verwenden.

Was Browser-Kompatibilität angeht, womit genau sollten da Browser Probleme haben? Ab und zu hat offenbar Safari Probleme mit etwas Bestimmtem (CSS), Safari sollte kein Totalausfall sein, aber davon abgesehen sollten doch über 99% Browserkompatibilität bei einer solchen Site möglich sein, oder? Alten IE mag ich nicht mehr berücksichtigen.

Was das DD mit Checkbox angeht, so sollte neben der Browserkompatibilität es keine Probs mit CSS Grid geben, denn die Navi wird wohl ein eigenes Grid bekommen und so dann auch responsibel werden (mit MQ). Und die bisher verwendeten Link-states sollten unbeeinflusst wie bisher möglich sein.
Wie genau die Checkbox dann für ein DD umgesetzt wird und ob es da irgendwelche Besonderheiten gibt, muss ich dann sehen.
Ich will im Moment einfach mal die Optionen ausloten, also ob es eine gute CSS-Alternative zu JS fürs Klick-Ausklappen gibt. Die einzige Einschränkung scheint das nötige, nochmalige Klicken aufs DD zum Verlassen sein, was @Hopsekäse angesprochen hat.