Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Drop-down-Liste mit CSS gestalten

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt die notwendige Vorgehensweise, um eine Drop-down-Liste mit Hilfe von CSS-Anweisungen zu gestalten. Dies erfordert die Anpassung der Listenelemente und die Definition einer Funktion, um diese bei Bedarf einzublenden.

Transkript

Ziel ist eine funktionierende Dropdown Navigation, die im breiten Browserfenstern und beim Ausbedingung herausklappt, wenn man über den entsprechenden Menüpunkt fängt. Ausganasposition ist das hier, das ist noch nicht ganz ein funktionierendes Dropdown- Menü, aber das Fundament ist bereits vorhanden. So, geändert wird natürlich, wie immer im CSS. Ich habe hier die navi-float-Dropdown css vorbereitet mit float:left für den Navibereich und vor dem Suchformular soll hier jetzt das Dropdown gestaltelt werden. Drop-down gestalten So, im ersten Schritt werden die Listenelemente der zweiten Ebenen navibereich ul.level2 li, die werden untereinander gestelt clear:both so, das erreicht im Browser hier schon mal, dass die untereinander stehen, denn die Ursache hier für das nebeneinander Stehen ist, dass die Listenelemente gefloatet sind. Das geschieht hier oben, navibereich li float:left und das gilt natürlich auch für die zweite Ebene. Hier in der Navigation sehen Sie navibereich li, alle li-s werden gefloatet, also auch diese. Und in dem Style hier werden jetzt die Listenelemente der zweiten Ebene hier, die werden gecleart, so das sie untereinander stehen. Weiter geht es mit navibereich ul. level2. Das ul kann man sich auch spannen, aber es ist so besser zu lesen, dann weißt man gleich aha, das ist die Liste position absolute das Ding soll versteckt werden. top: -32768px es bist einfach eine sehr größe Zahl, die alle Browser verstehen, denn, wenn die Zahl zu groß wird, dann haben einige schon wir Probleme width:left, height:0, so, versteckt und width oberhalb des Bildschirms, position absolute. Die zweite Ebene ist weg, wenn alles glatt gelaufen ist, sollte sie jetzt nicht mich zu sehen sein. Leider klappt sich ordner nicht heraus. Das ist der nächste Schritt. Hier darunter ein bischen Platt schaffen und weiter geht es mit navibereich Listenelemente der ersten Ebene, wenn da gehovert wird, dann sollte die zweite Ebene eingeblendet werden. Und das passiert indem Schritt für Schritt, oben die Werte auf Auto gesetzt werden. Das unrichtige Auto-Style hier left soll auf auto stehen und nicht auf -32768 top genau so, dann kommt width auf auto und height auf auto, so zusätzlich soll das noch alles geblockt werden, damit sie auf wirklich vernünftig dargestellt werden, und die Liste bekommt, wenn Sie erscheint noch ein border-bottom von2px solide in dem Gelbton des Headers, so. Da haben wir eigentlich alles was nötig ist und jetzt einmal neu laden und gucken mit der Maus auf Hobbys fan und der klappte schon heraus und Sie sehen funktioniern würde es schon, aber es muss noch ein bischen gestaltet werden. Die Gestaltung werde ich wieder an die Links geben, das ist also, navibereich ul level 2 a die Hyperlinks der zweiten Ebene und die sollen schlicht und einfach eine Hintergrundfarbe bekommen background:fff3c0 nehme ich mal, es ist auch so ein heller gelb tun. So, min-width:6em also, sie sollen mindenstens so ungefähr 80px Breit sein orenieren sich über an der Schriftgröße, das heißt, wenn die Schriftgröße wächst, wächst die mindest Breite auch. So, neu laden Hobbys und das sieht doch schon ganz gut aus. Man könnte klicken, wenn es Unterseiten geben würde, würden die jetzt aufgerufen. So weit so gut, es fehlt nur noch eine Kleinigkeit, denn wenn ich jetzt in ein kleinen Viewport gehe, dann würde das hier immer noch erscheinen, das könnte, aber Probleme geben bei der Bedienung pure touch, man kann das so lassen, aber man kann genauso gut den Unterpunkt hier die Unterliste ausblenden für kleine Viewports, denn hier ist die Navigation über die Seite Hobbys problemelos möglich. Ich möchte zu mindens zeigen, wie das geht, wenn Sie das machen möchten. So, da haben wir hier display: none schon mal vorbereitet und es soll, dann die Liste navibereich ul.level2 ausgeblendet werden und die navibereich li: hover ul.level2 auch, also, wenn da gehovert wird in irgendeiner Form, denn soll das auch ausgeblendet werden. So, damit ist alles weg, wenn es geklappt hat, und hier hovert nichts mehr. Navigibar ist die Seite nach wie vor, ein Besucher mit einem klein Viewport weiß nichts von der Dropdown- Liste wird Sie auch nicht vermissen, denn die Navigation ist da. Ein Besucher mit einem breiten Bildschirm, mit einem breiten Viewport und eine Maus der sieht hier die Menüs und das Funktioniert alles ganz wunderbar.

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!