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
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?
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.
Ich verstehe einfach nicht, wie es dazu kommt, dass das Untermenü genau unter dem Obermenü(Dropdown) liegt.
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!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Absolute</title>
<style>
span.absolut {
position: absolute;
width: 200px;
height: 200px;
color: #f00;
border: 1px solid #f00;
background-color: rgba(100,100,100,0.8);
}
</style>
</head>
<body>
<h1>Ein Demo</h1>
<p>Lorem ipsum dolor sit amet, <span class="absolut">Hier bin ich und hier bleib ich</span> consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>
</body>
</html>