Wie programmiere ich ein Dropdown-Fenster?

... komplette Frage anzeigen

4 Antworten

Man kann das dropdown-menu auf verschiedene Arten erstellen, dabei sprichst du immer die ul li ul an (also die ul vom submenu), z.B:
1) auserhalb der Browser-sicht positionieren, beim hover dort hin  wo das Menu sein soll, mit margin;
2) ist immer aufgeklappt aber nicht sichtbar, beim hover wird es sichtbar, mit visibility: hidden / visibility: visible, oder opacity = 0 / opacity = 1 (letzteres lässt sich zwar einfach amimieren, braucht aber seperaten code für IE);

Das hover (Auslösung des Effekts) betrifft die erste li, also ul li:hover xxx, wobei xxx hier z.B. die submenu ul sein könnte welcher du Größen und
Hintergrund  etc. gibts, oder die li des Submenus, welche z.B als display: block (nicht inline-block) sein muss.

Diese Anwendungen sind CSS basiert, kein js, aber wenn deine Webseite responsive sein soll, dann muss dass gesamte Menü früher oder zuklappen und bei klick aufklappen - Dafür brauchst du selbstverständlich js, und die ganze Menu nimmt nun eine  vertikale Struktur an (ul li ist nicht mehr inline-block, sondern auch block, wie das Submenu).

Antwort bewerten Vielen Dank für Deine Bewertung

Das Ganze kannst du mit nur CSS machen, indem du das ul von den Hauptmenüpunkten ansprichst. Die wichtigsten attribute, die du dafür benötigst, sind position: absolute, display: none;display: block;:hover...

Antwort bewerten Vielen Dank für Deine Bewertung

Die Menüpunkte positionieren sich beim Skalieren des Browserfensters untereinander, weil sie floaten.
Um das zu verhindern musst du Media Queries (Stichwort: Responsive Design) verwenden und an den Breakpoints (die Momente, wo du mit den Media Queries sagst, dass sich Inhalte der Webseite verändern sollen) halt sagen, was mit der Navigation passieren soll.

Antwort bewerten Vielen Dank für Deine Bewertung

Für sowas greift man auf ein schlankes Framework wie z.B. Bootstrap zurück. Das hilft, die ganze Seite relativ einfach responsive zu gestalten und das Menü natürlich auch.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von FlugzeugAUT
11.06.2016, 11:29

Wenn ich wüsste wie ich das anwenden soll, JQuery ist genauso ein Framework ist glaube ich eine harte Arbeit, sich das alles zu erlernen :/

0

Was möchtest Du wissen?