dynamisches Dropdown Menü

[Tobi2706]

Hallo zusammen,

vielleicht kann mir jemand von euch weiterhelfen. Ich bin dabei ein Formular in HTML zu erstellen. Dieses soll ein Dropdown Menü beinhalten mit 4 unterschiedlichen Menüpunkten. Nun würde ich das gerne so gestalten, dass bei Auswahl eines Menüpunktes (und abschicken des Formulars) die entsprechende verlinkte Seite angezeigt wird. Also für jeden der 4 unterschiedlichen Menüpunkten jeweils eine der 4 vordefinierten Seiten. Kann mir jemand sagen, ob das geht und eventuell sogar ein script nennen, mit dem das geht? Vielen Dank!

[J o]

Hey,

Hast du dir schonmal <select> angeschaut? Der Redirect zu der Auswahl kommt dann bei der Verarbeitung der Formulardaten.

Gruß
Jo

[Gunnar Bittersmann]

@@Tobi2706

Dieses soll ein Dropdown Menü beinhalten mit 4 unterschiedlichen Menüpunkten. Nun würde ich das gerne so gestalten, dass bei Auswahl eines Menüpunktes (und abschicken des Formulars) die entsprechende verlinkte Seite angezeigt wird.

Was denn nun, Formular oder Menü? Anders gefragt: Datenverarbeitung oder Navigation?

Aufgrund deiner Beschreibung vermute ich letzteres; dann ist ein Formular falsch.

Warum sollen die 4 Menüpunkte überhaupt versteckt werden und nicht gleich sichtbar sein?

LLAP 🖖

[Tobi2706]

Ja, sorry die falsche Formulierung. Es soll eine Navigation sein. Es kann natürlich auch aufgehen, wenn man mit der Maus drüber fährt. Aber prinzipiell sollte es nicht gleich komplett sichtbar sein. Ist sowas denn ohne allzu große Programmierkenntnisse umsetzbar? Viele Grüße

[J o]

Guten Morgen,

Ja, sorry die falsche Formulierung. Es soll eine Navigation sein. Es kann natürlich auch aufgehen, wenn man mit der Maus drüber fährt. Aber prinzipiell sollte es nicht gleich komplett sichtbar sein. Ist sowas denn ohne allzu große Programmierkenntnisse umsetzbar?

Auch das geht, Dropdown Menüs.

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Auch das geht, Dropdown Menüs.

Aber nicht so! Der Abschnitt Submenü ausblenden und das dortige Beispiel sind grob fehlerhaft:

tabindex="0" auf die li zu setzen, damit diese den Tastaturfokus erhalten können, ist ein eher mittelguter Hack.

Und was tun Browser, die :focus-within nicht verstehen, mit folgender Regel?

nav li:hover .submenu,
nav li:active .submenu, 
nav li:focus .submenu,
nav li:focus-within .submenu
{ 
  visibility: visible;
  height: auto;
}

Gar nichts! Sie wird komplett ignoriert. In IE und Edge geht das Menü nicht einmal bei Hover auf. Das hätte dem Ersteller des Beispiels eigentlich auffallen sollen.

Damit Browser wenigstens den ihnen verständlichen Teil verarbeiten, muss der Selektor dafür für sie vollständig verständlich sein. Man müsste die Regel also aufteilen:

nav li:hover .submenu,
nav li:active .submenu, 
nav li:focus .submenu
{ 
  visibility: visible;
  height: auto;
}

nav li:focus-within .submenu
{ 
  visibility: visible;
  height: auto;
}

Ich hab das in diesem Testbeispiel mal gegenübergestellt: Menü 1 vs. Menü 2.

Menü 2 öffnet sich zwar auch in Browsern, die :focus-within nicht verstehen. Man kommt aber mit Tastatursteuerung nicht an die Unterpunkte heran.

Ein CSS-only-Dropdown-Menü funktioniert nur mit :focus-within. Man darf in Browsern, die :focus-within nicht verstehen, das Ding nicht verstecken. Wie bei Menü 3 umgesetzt: in IE und Edge ist das Ding immer offen.

Und den Hack mit tabindex braucht man auch nicht.

Wenn es auch ohne :focus-within auf-/zuklappen soll, kommt man an einer JavaScript-Lösung nicht vorbei. Auch dann gilt: Ohne JavaScript muss das Ding immer offen sein; erst mit JavaScript zuklappen.

LLAP 🖖

[J o]

Hey,

@@J o

Erzähl das nicht mir sondern dem Ersteller. Ich verlinkte nur in dem Glauben etwas solides beizutragen.

Gruß
Jo

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich hab das in diesem Testbeispiel mal gegenübergestellt: Menü 1 vs. Menü 2.

Ich vermisse: „Ich hab das Beispiel im Wiki gleich korrigiert.“

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ich hab das in diesem Testbeispiel mal gegenübergestellt: Menü 1 vs. Menü 2.

Ich vermisse: „Ich hab das Beispiel im Wiki gleich korrigiert.“

Du hast schon mein Posting so verstanden, dass auch Menü 2 nicht tauglich ist?

Es ist keine eben mal schnell gemachte Korrektur im Beispiel-CSS angesagt, sondern eine gründliche Überarbeitung des Abschnitts.

LLAP 🖖

[marctrix]

Hej Tobi2706,

Ja, sorry die falsche Formulierung. Es soll eine Navigation sein. Es kann natürlich auch aufgehen, wenn man mit der Maus drüber fährt.

Und wenn man ein Handy hat — oder was anderes, wo keine Maus dran ist?

Aber prinzipiell sollte es nicht gleich komplett sichtbar sein.

Mein Rat: wenn es wirklich nur vier Punkte sind, lohnt sich aller Wahrscheinlichkeit nach nicht der Aufwand, der nötig ist, um die zu verbergen. Für die Besucher ist der zusätzliche Klick auch eher lästig.

Ist sowas denn ohne allzu große Programmierkenntnisse umsetzbar?

Ja. Helfen dir die Links, die du von @J o bekommen hast?

Marc

[Tobias]

Hallo Jo, hallo Gunnar,

ja vielen Dank für die Antworten und eure Vorschläge. Ich werde das gleich morgen früh mal ausprobieren. Ich lass euch wissen, ob es geklappt hat! Danke erstmal!

Viele Grüße