Dropdownmenü Erklärung

    Mit dem overflow wird das float der in dem <ul> liegenden Elemente aufgehoben. Ohne das wäre bei dieser Art Aufbau das Menü gar nicht zu sehen.

    Die Positionierung des Aufklappens wird per absolute Positionierung erreicht. Wenn man jegliche top, left, right oder bottom Eigenschaft weglässt, positioniert der Browser die Elemente automatisch so wie Du es siehst.

    Hinweis: das ist eine Möglichkeit von vielen um ein Dropdown-Menü zu erstellen.

    Hallo

    Es kommt darauf an für wen die Webseite erstellt wird.

    Die meisten Webseiten werden für ihre Besucher erstellt. In diesem Fall sollten alle Elemente einer Webseite benutzerfreundlich erstellt werden.

    Jeder zunächst versteckte Inhalt, also auch Dropdown-Menüs, stellen eine Barriere dar, der grundsätzlich vermieden werden sollte und in der Regel auch kann. Benutzerfreundliche Webseiten haben keine versteckten Inhalte, also auch keine Dropdown-Menüs.

    Wenn Webseitenersteller trotzdem Dropdown-Menüs erstellen wollen sollten die von möglichst vielen Besuchern erkannt und bedient werden können.

    Hierbei haben viele Webseitenersteller das Problem, ihr Wissen auch von den Besuchern zu erwarten. Dabei können viele Personen zum Beispiel mit dem Hamburger-Symbol (drei waagerechte Streifen übereinander), wie mit vielen anderen Symbolen auch, nichts anfangen. Wenn ein zugeklapptes Dropdown-Menü deshalb nur durch das Hamburger-Symbol angezeigt wird, wird es von vielen Besuchern gar nicht erst erkannt, die restichen Webseiten bleiben ihnen verborgen. Das wollen die Webseitenbetreiber in der Regel nicht. Zu jedem Symbol gehört also zusätzlich eine ordentliche Beschriftung.

    Weiterhin sollte das Dropdown-Menü mit allen Eingabegeräten benutzbar sein. Die Mehrheit der Besucher verwenden zum Beispiel heutzutage Touchscreen-Geräte, die überhaupt keine Hover-Effekte kennen. Dazu kommen dann noch Besucher, die Tastaturen, Joysticks oder Screenreader verwenden. Die können Dropdown-Menüs häufig überhaupt nicht aufklappen, selbst wenn sie diese erkennen. Dabei ist das technisch heutzutage kein Problem, dazu ist immer auch etwas JavaScript erforderlich. Reines HTML und CSS reichen für benutzerfreundliche Dropdown-Menüs nicht aus.

    Nach Möglichkeit sollte auf Dropdown-Menüs also verzichtet werden. Wenn sie trotzdem verwendet werdens sollen sollten sie von möglichst vielen Besuchern erkannt und bedient werden können, nicht nur von der weiterhin schrumpfenden Minderheit der Maus-Benutzer.

    Da du mit ziemlicher Sicherheit eine Tastatur verwendest ist mit der ein ganz schneller Test möglich. Du kannst einfach versuchen Dropdown-Menüs mit der Tastautur zu bedienen. Wenn das nicht funktioniert sind die Schrott.

    Für mehr Hintergrundwissen als hier im Forum möglich kannst du zum Beispiel nach

    dropdown-menu barrierefrei

    suchen. Dann möglichst viele nachbauen (dabei lernst du am meisten) und nach den von mir genannten Kriterien ausprobieren. Der Tastaturtest dauert nur ein paar Sekunden.

    Dann wirst du auch erkennen, dass das hier von dir verlinkte Dropdown-Menü ein Beispiel ist, wie man es nicht erstellen sollte.


    Gruss

    MrMurphy

    Zitat von threadi


    Die Positionierung des Aufklappens wird per absolute Positionierung erreicht. Wenn man jegliche top, left, right oder bottom Eigenschaft weglässt, positioniert der Browser die Elemente automatisch so wie Du es siehst.

    Ok, und warum ist in diesen Beispielen das blaue Div nicht unter dem roten Div, so wie beim Dropdownmenü?

    https://jsfiddle.net/8ohc3qs7/2/

    https://jsfiddle.net/8ohc3qs7/1/


    MrMurphy danke für die Tipps.

    Deine beiden 'fiddles' haben auch nichts mit dem Dropdown Menü zu tun. Du hast einfach eine absolute positionierte, blaue Box in eine rote gepackt!
    Was soll da wie ausgerichtet und untereinander sein?

    if(!sleep)

    {$sheep++;}

    Ein mit position: absolute; formatiertes Element erscheint immer genau da, wo es im Textfluss der Seite eingefügt wird, vorausgesetzt, es wird nicht abweichend positioniert (zB durch top, left, right, bottom).
    Es ist nur aus dem Textfluss herausgenommen und wird nicht von andere Elementen 'umflossen'. Es sitzt einfach oben drüber und belegt auch keinen Platz, wie es ein Element im Textfluss tun würde.
    Wenn du also eine absolut positioniertes Element in eine Liste einfügst, dann ist es auch genau an der Stelle der Liste, wo du es einfügst.
    Vielleicht macht es das folgenden Beispiel ja etwas klarer!

    if(!sleep)

    {$sheep++;}