CSS Menü: Kann mir einer erklären, wie es funktioniert?
Felixi
- css
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
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:
Herzliche Grüße
Matthias Scharwies
@@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 🖖
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.
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
undlinear-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
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
Hi,
(@edit - okay, es sind vier CSS-Regeln.
display:inline-block
,position:relative
,position:absolute
undleft: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
@@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
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 🖖
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
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
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
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
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
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