Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Drop-down-Liste erstellen

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein Entwickler realisiert eine Drop-down-Liste für mehrere Unterseiten eines Menüpunkts mit Hilfe von CSS-Quellcode. Dieses wird ausschließlich in aktivem Zustand geöffnet.

Transkript

Eine Navigation zum Ausklappen auf Drop-down Menü genannt, möchte ich ihnen jetzt hier zeigen, dazu ist eine vierte Seite eingebaut worden, die Seite Hobbys und die hat 3 angedeutete Unterseiten die Seiten Hobbys gibt es hier wirklich, die Unterseiten werden nur angedeutet, da gibt es keine wirklichen Links hin aber dieses Untermenü zum Rausklappen, das hat es in Sicht, denn die erste Navigations Ebene wird immer angezeigt, egal wo man gerade ist und die zweite Ebene ist, wenn man auf dem entsprechneden Menüpunkt mit der Maus ein Moment verweilt. Dieses Drop-down, dieses Herausklappen wird hier mit CSS realisiert und ich möchte ihnen jetzt einmal die Änderung im HTML und im CSS zeigen, die hier als Ausgangsposition dienen. Zuerst die Seite Hobbys hier es ist eine Copy einer anderen Seite hier einfach nur mit ein paar Änderungen drin, im Inhaltsbereich der Titel Hobbys oben der Seitentitel Hobbys hier und im Inhaltsbereich eine Liste mit Links zu den 3 angedeuteten Unterseiten angedeutet, deshalb, weil hier kein richtiger Link ist, sondern einfach nur eine Raute die aber als Link funktioniert. Die Navigation wurde erweitert und natürlich um ein Link zur Hobbyseite aber auch um eine Unterliste hier eine verschachtelte Liste zu den 3 Unterseiten Die Unterliste hat die KLasse level 2 und die gibt es auf allen Seiten, denn in den Navigation ist es hier egal auf welche Seite man ist, hier die Unterliste soll immer rausklappen egal auf welche Seite der ersten Ebene der Besucher sich befindet. Also, diese Navigation wird auf allen Seiten eingebaut. Im CSS gibt es ein paar Änderungen zuerst einmal in zentrale css, wo der navi-float- horizontal durch navi-float Dropdown ersetzt und das ist das Stylesheet hier das ist im wesentlichen eine Copy von navi-float-horizontal, die an 2,3 Stellen etwas geändert wurde, nähmlich statt des Containing Floats also, statt des Umschließen der gefloateten Listenelemente, damit der Farbverlauf hier sichtbar wird statt des Overflow hidden dabei gibt es hier das Float:left den Overflow hidden würde natürlich das Dropdownmenü abschneiden. Zu langsam sehen Sie , warum es verschiedene Methoden zum Umschließen von gefloateten Elementen gibt, denn alle haben ihre Vor- und Nachteile. Bei float: left muss man width: 100% angeben, damit es sich über die gesamte Breite erstreckt und damit es dann nicht mit dem ganzen Padding, was hier noch vergeben wird, größer wird als 100% gibt es hier noch wieder box-sizing border-box Sie sehen, dass entwickelt sich langsamer sicher zum standart und wenn Sie merken, dass Sie das oft einsetzen, dann können Sie genau so gut Sternchen box-sizing border-box in fundament.css schreiben dann braucht man das hier nicht für jedes Element einzeln zu machen Hier unten bei den links ist das Padding ein ganz klein bischen verkleinert worden, damit das auch auf schmalen Bildschirm noch nebeneinander passt So weit zu den Voraussetzungen hier, das Ganze so ist es fertig im Moment sieht das Ganze so aus, denn die zweite Ebene ist sichtbar, sie ist noch nicht versteckt das wird jetzt im Folgenden geschehen.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!