CSS Menü: Kann mir einer erklären, wie es funktioniert?

[Felixi]

Hallo,

ich möchte dieses Menü benutzen, klappt auch soweit ganz gut.

Was mir nicht so ganz gelingen will, ist, dass man in der Hauptnavigationsleiste einen Hauptnavigationspunkt anklicken kann und die Subnavigation hierzu offen bleibt. Mir fehlt auch die Idee, wie das funktioniert. Ich könnte mir das vorstellen, wenns php wäre und current über $_GET peparsed wird und im Menü dann entsprechend eingesetzt wird.

Kann mir das jemand erklären?

Felix

[Matthias Scharwies]

Servus!

Hallo,

ich möchte dieses Menü benutzen, klappt auch soweit ganz gut.

Stu Nicholls ist ein Genie, verwendet aber häufig (zu) viele Elemente und Klassen (Das <b></b> der Monate könnte man sich sparen).

Was mir nicht so ganz gelingen will, ist, dass man in der Hauptnavigationsleiste einen Hauptnavigationspunkt anklicken kann und die Subnavigation hierzu offen bleibt. Mir fehlt auch die Idee, wie das funktioniert.

Die CSS-Festlegung geht nur auf :hover und nicht auf :focus und :active

Zum weiteren Verständnis:

• Menüs und Navigation

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

ich möchte dieses Menü benutzen, klappt auch soweit ganz gut.

Die CSS-Festlegung geht nur auf :hover und nicht auf :focus und :active

Dadurch klappen bei Tastaturbedienung die Untermenüs nicht auf und zu; das Menü ist unbenutzbar.

Stu Nicholls ist ein Genie, verwendet aber häufig (zu) viele Elemente und Klassen (Das <b></b> der Monate könnte man sich sparen).

Sliding Doors waren damals genial. Seit dem Einzug von border-radius und linear-gradient in CSS (also seit gefühlten 20 Jahren) sind sie es nicht mehr.

Bewahren wir Stu Nicholls’ Menüs im Museum. Heutzutage verwenden wir besser barrierefreie Menüs von Heydon Pickering.

LLAP 🖖

[Ramses]

damals

Steht, wie hier, in einer Codebeschreibung "Works in IE5.5, IE6, Firefox, Opera and should be ok in Netscape, Mozilla and Safari.", sollte das mit spitzen Fingern angefasst werden. Von den sieben aufgezählten Browsern sind nicht nur nur noch zwei aktuell, bei dem der Rest handelt es sich auch um eine Ansammlung mittelalterlicher Antiquitäten bzw. er wurde durch den Hersteller im Sondermüll entsorgt.

[Felixi]

Spaß beiseite ;-)

Dadurch klappen bei Tastaturbedienung die Untermenüs nicht auf und zu; das Menü ist unbenutzbar.

Stu Nicholls ist ein Genie, verwendet aber häufig (zu) viele Elemente und Klassen (Das <b></b> der Monate könnte man sich sparen).

Sliding Doors waren damals genial. Seit dem Einzug von border-radius und linear-gradient in CSS (also seit gefühlten 20 Jahren) sind sie es nicht mehr.

Bewahren wir Stu Nicholls’ Menüs im Museum. Heutzutage verwenden wir besser barrierefreie Menüs von Heydon Pickering.

Das Menü funktioniert ja auch heute noch. Aber ich habe in tagelanger Suche überhaupt kein Menü gefunden, bei dem das Submenü (ich benötige nur eine Submenüebene) ebenfalls horizontal aufgeht.

Wenn Ihr schon unisono meint, das Menü sei unbrauchbar, könnt Ihr mir wenigstens eines zeigen, das (Stand heute) adäquat hierzu ist?

Felix

[Camping_RIDER]

Aloha ;)

Das Menü funktioniert ja auch heute noch.

"Das funktioniert" (in meinem Browser, mit meiner Bildschirmgröße, unter meinen Randbedingungen) war noch nie das beste Argument für sinnvolles Webdesign.

Aber ich habe in tagelanger Suche überhaupt kein Menü gefunden, bei dem das Submenü (ich benötige nur eine Submenüebene) ebenfalls horizontal aufgeht.

Was hindert dich daran, das verlinkte Menü gemäß deinen Bedürfnissen zu modifizieren? Beispielsweise kannst du durch display:inline-block; (angewandt auf die li-Elemente im Dropdown) erreichen, dass die Dropdown-Sektion nicht vertikal, sondern horizontal angeordnet wird. Wenn du zusätzlich möchtest, dass das Dropdown linksbündig ist gibt es auch dafür Möglichkeiten - z.B. via absoluter Positionierung (left:0px;) des ul innerhalb von nav {position: relative;} (es mag auch eleganter gehen, aber das funktioniert).

Wenn Ihr schon unisono meint, das Menü sei unbrauchbar, könnt Ihr mir wenigstens eines zeigen, das (Stand heute) adäquat hierzu ist?

Mit einer vorgefertigten Lösung kann ich leider nicht dienen - die Umgestaltung ist aber wie gesagt sehr einfach. Ich konnte schon nur mit Entwicklerwerkzeugen auf der verlinkten Seite durch Einfügung der genannten drei CSS-Regeln in etwa das erreichen, was dir vorschwebt... Siehe Screenshot.

(@edit - okay, es sind vier CSS-Regeln. display:inline-block, position:relative, position:absolute und left:0px)

Wenn Folgefragen auftauchen - einfach melden.

Grüße,

RIDER

[Felixi]

Hi,

(@edit - okay, es sind vier CSS-Regeln. display:inline-block, position:relative, position:absolute und left:0px)

![Screenshot verändertes Menü]

Wenn Folgefragen auftauchen - einfach melden.

Holla, da weiß aber einer, wie und an welchen Schräubchen zu drehen ist. Nicht schlecht! Wirf doch mal einen Blick auf das 2. von Gunnar vorgestellt Modell und meine beiden Fragen (Probleme) dazu. (https://forum.selfhtml.org/self/2016/feb/15/css-menue-kann-mir-einer-erklaeren-wie-es-funktioniert/1661082#m1661082)

Gruß, Felix

[Gunnar Bittersmann]

@@Felixi

Das Menü funktioniert ja auch heute noch.

Nein, es funktioniert nicht. Hat es noch nie.

“Keyboard accessibility is not a feature. If an interactive widget is on The Web and not keyboard accessible, it is unfinished / broken.” —Heydon Pickering

Aber ich habe in tagelanger Suche überhaupt kein Menü gefunden, bei dem das Submenü (ich benötige nur eine Submenüebene) ebenfalls horizontal aufgeht.

Die Anordnung der Menüpunkte ist Sache von CSS.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Heutzutage verwenden wir besser barrierefreie Menüs von Heydon Pickering.

Oder jenes. Wobei beiden gemeinsam ist, dass da etwas JavaScript im Spiel ist. Muss wohl, um die Werte der ARIA-Attribute umzuschalten.

LLAP 🖖

[Felixi]

Oder jenes. Wobei beiden gemeinsam ist, dass da etwas JavaScript im Spiel ist. Muss wohl, um die Werte der ARIA-Attribute umzuschalten.

Gefällt mir prinzipiell etwas besser, da etwas weniger Code. Bleiben aber dennoch die beiden Probleme: Submenue soll horizontal aufgehen und zum zweiten sollen Hauptnavigationslinks als Tabs dargestellt werden.

Was mir richtig gut gefällt, ist, dass das Menue per Tabulatortaste bedient werden kann und, dass beim überfahren mit der Maus die einzelnen Menuepunkte "offen" bleiben.

Felix

[Camping_RIDER]

Aloha ;)

Gefällt mir prinzipiell etwas besser, da etwas weniger Code. Bleiben aber dennoch die beiden Probleme: Submenue soll horizontal aufgehen und zum zweiten sollen Hauptnavigationslinks als Tabs dargestellt werden.

Das geht auch in diesem Beispiel ganz genau so, wie ich schon oben erläutert hatte - einzige Veränderung: die Links sind hier auch Blöcke, die mit entsprechender display:inline-block - Eigenschaft versehen werden wollen. Um dir konkret zu nennen, wie du das Beispiel hier verändern musst, fehlt mir allerdings gerade die Zeit.

Ich bin übrigens nicht der Meinung, dass dieses Beispiel weniger Code aufweist. Das zugehörige CSS ist vergleichsweise deutlich mehr - daher auch meine Schwierigkeiten, die konkreten Schritte schnell herzuzaubern.

Grüße,

RIDER

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Oder jenes. Wobei beiden gemeinsam ist, dass da etwas JavaScript im Spiel ist. Muss wohl, um die Werte der ARIA-Attribute umzuschalten.

Jenes ist ohne JavaScript nicht bedienbar. Die Submenu-Punkte sind weder mit der Maus noch mit der Tabulatortaste erreichbar. Also schlechtes Beispiel.

Bis demnächst
Matthias

[Felixi]

Jenes ist ohne JavaScript nicht bedienbar.

...was für meine komplette Seite gilt. Und was absolut erlaubt ist, wenn man eine abgegrenzte Zielgruppe hat. Wenn das also Dein einziger Kritikpunkt an dem Menü ist, soll er für diesen Thread nicht gelten.

Felix

[Auge]

Hallo

Jenes. ist ohne JavaScript nicht bedienbar.

...was für meine komplette Seite gilt. Und was absolut erlaubt ist, wenn man eine abgegrenzte Zielgruppe hat. Wenn das also Dein einziger Kritikpunkt an dem Menü ist, soll er für diesen Thread nicht gelten.

Doch, natürlich soll er das, auch wenn der Hinweis eventuell nicht auf deinen Fall zutreffen mag. Dieser Thread wird, wie fast jeder andere, mittelfristig im Archiv landen. Wird er dort gefunden, soll auch der Hinweis auf Unzulänglichkeiten von angebotenen Lösungen dabei stehen.

Er wird dort nämlich von Suchenden gefunden werden, die mit deinen Gegebenheiten und Bedingungen, unter denen eine Lösung funktionert, nichts zu tun haben. Ob eine Lösung allgemein gut ist oder nur für deinen Fall, werden die meisten Suchenden ohne einen Hinweis nicht einschätzen können.

Tschö, Auge

[Matthias Apsel]

Hallo Felixi,

...was für meine komplette Seite gilt.
Und was absolut erlaubt ist, wenn man eine abgegrenzte Zielgruppe hat.

Kommt darauf an, wie abgegrenzt die Zielgruppe ist. Ein Menü sollte auch ohne JS bedienbar bleiben. Das ließe sich aber relativ einfach nachrüsten.

Bis demnächst
Matthias