2 Dropdown Menüs - Button nebeneinander, aber Dropdownliste über volle Breite - ist das möglich?

[ebody]

Hallo,

https://codepen.io/anon/pen/rqVQBb

Die beiden Button sollen nebeneinander stehen. Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

Ich habe schon sehr viel ausprobiert, daher wollte ich fragen, ob das Ziel mit diesem HTML Code, mit dieser Verschachtelung überhaupt möglich ist?

.dropdown muss ja 100% haben, wenn die darin verschachtelte Dropdownliste <ul class="dropdown-menu"...> über die volle Breite gezeigt werden soll oder?

Gruß ebody

[Felix Riesterer]

Lieber ebody,

https://codepen.io/anon/pen/rqVQBb

Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

ja, und? Wo ist das Problem?

.dropdown muss ja 100% haben, wenn die darin verschachtelte Dropdownliste <ul class="dropdown-menu"...> über die volle Breite gezeigt werden soll oder?

Ja, und? Wo ist das Problem? Etwa das hier?

.dropdown{
  float: left;
  width: 100%;
}
		
.btn-default{
  width: 50%;
}

Die Buttons sollen nur 50% Breite haben? Ja?

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Die Buttons sollen nur 50% Breite haben? Ja?

Nein. Es sollen gar keine Buttons sein.

LLAP 🖖

[ebody]

Lieber Felix,

solche "Antworten" wie deine sagen sehr viel über den Charakter. Bist Du frustriert, unzufrieden mit dir? Komm ich drück dich mal, wird alles gut.

Und falls du es nicht gesehen hast, darum geht es.

Die beiden Button sollen nebeneinander stehen. Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

LG und sei nicht so frustriert! ebody

[Gunnar Bittersmann]

@@ebody

solche "Antworten" wie deine sagen sehr viel über den Charakter.

??

Und falls du es nicht gesehen hast, darum geht es.

Die beiden Button sollen nebeneinander stehen.

Nein, darum geht es nicht. Es geht nicht um Buttons, sondern um <select>-Elemente, die nebeneinander stehen sollen.

Das geht am einfachsten mit Grid (zumindest solange, bis Browser die CSS-Eigenschaft gap verstehen und auch bei Flexboxen anwenden). Keine Media-Queries nötig; einfach Mindestbreite und Zwischenraum angeben, fertig.

☞ Beispiel

Die Dropdownliste, soll wie auch jetzt schon über die volle Breite der beiden Button gehen.

Die Dropdownliste ist außerhalb deiner Macht. Dafür sieht sie genau so aus, wie der Nutzer es auf ihrem Gerät erwartet. Auf dem iPhone bspw. so:

LLAP 🖖

[Gunnar Bittersmann]

@@ebody

ob das Ziel mit diesem HTML Code, mit dieser Verschachtelung überhaupt möglich ist?

Das Ziel sollte sein: benutzbare Webseiten zu erstellen. Nein, das ist mit diesem Code nicht möglich.

Dein Fehler ist, <select>/<option> mit anderen Elementen nachbauen zu wollen. Da kann nichts Gutes bei rauskommen.

Verwende <select>/<option>.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

das Ziel sollte es doch sein, eine Darstellung zu finden die der Semantik gerecht ist.

Wird da etwas in einem Form aus einer Auswahlliste ausgewählt? Oder ist das ein Menü? Dementsprechend sollte es select sein, oder Links die als paralleles Dropdown gestaltet sind.

Allerdings fände ich es bei einem Dropdown Menü merkwürdig, wenn die Dropdown-Menüpunkte jeweils unter beiden Menüpunkten sind. Bei einer horizontalen Menüleiste und darunter senkrecht angeordneten Dropdown-Menüpunkten würde ich eigentlich erwarten, dass Haupt- und Submenü nach irgendeiner konsistenten Regel aneinander ausgerichtet sind.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wird da etwas in einem Form aus einer Auswahlliste ausgewählt? Oder ist das ein Menü?

Es sieht aus wie Auswahlliste, also werden es wohl Auswahllisten sein. Wenn es Menüs sein sollten, liegt der Fehler darin, dass sie aussehen wie Auswahllisten.

das Ziel sollte es doch sein, eine Darstellung zu finden die der Semantik gerecht ist.

Du sagst es.

LLAP 🖖

[beatovich]

hallo

das Ziel sollte es doch sein, eine Darstellung zu finden die der Semantik gerecht ist.

Eigentlich muss die Absicht klar werden. Was will ich letztendlich erreichen. Dann sucht man dazu die passenden Instrumente (das geeignete HTML). Zuletzt optimiert man das ganze.

Gunnar ist zu optimistisch darin, die Absicht zu erkennen.

Ich muss nur das Ganze in ein <nav> Element einpacken. Dann dürften Formularelemente wohl nur Ausnahmsweise gefragt sein. Aber selbst wenn es sich um was anderes handelt, ist der Vorschlag über select suboptimal. Selectboxen sind arme Brüder wenn es darum geht, die einzelnen Menu-Einträge funtional anzureichern. Jeder der ein Menu gesehen hat, weiss, dass ein Eintrag bereits eine Sammlung verschiedener Funtionen oder Hints ist. Zuletzt kommt die Erwartung des Users, der NICHT davon ausgeht, dass eine Auswahl sofort ausgeführt wird. Gerade das mag aber hier erwünscht sein.