So Erstellen Sie Ein Horizontales Dropdown-Menü

Inhaltsverzeichnis:

So Erstellen Sie Ein Horizontales Dropdown-Menü
So Erstellen Sie Ein Horizontales Dropdown-Menü

Video: So Erstellen Sie Ein Horizontales Dropdown-Menü

Video: So Erstellen Sie Ein Horizontales Dropdown-Menü
Video: Responsive Navigation with Animated Multi Level dropdown | HTML and CSS Tutorial 2024, Kann
Anonim

Einer der wichtigsten Aspekte bei der Software- und Website-Entwicklung ist die Menüerstellung. Als Paradebeispiel sind Microsoft und seine berühmteste Idee, das Windows-Betriebssystem, zu nennen. Trotz der Tatsache, dass dieses Produkt von der überwältigenden Mehrheit der PC-Benutzer weltweit verwendet wird, nimmt die Kritik nicht nur nicht ab, sondern wächst ständig. Im Grunde geht es um die Unannehmlichkeiten der Lokalisierung von Menüpunkten. Im Folgenden wird beschrieben, wie Sie Menüs in CSS und Expression Web erstellen.

So erstellen Sie ein horizontales Dropdown-Menü
So erstellen Sie ein horizontales Dropdown-Menü

Anweisungen

Schritt 1

Um mit der Erstellung eines horizontalen Menüs zu beginnen, gehen Sie zu Stil verwalten und klicken Sie dann auf die Schaltfläche Neuer Stil. Benennen Sie den neuen Stil Selektor ul li. Wichtig! Stellen Sie sicher, dass die generierte Datei die Erweiterung dropdown.css hat. Um ein horizontales Menü zu erstellen, weisen Sie dem erstellten Element darauf hin, dass es genau horizontal sein wird. Bestimmen Sie als Nächstes die Breite jedes Menüeintrags und entfernen Sie alle unnötigen Punkte vor allen Einträgen in der Liste.

Schritt 2

Gehen Sie zur Option Layout, setzen Sie das Anzeigeattribut auf Inline, um eine horizontale Ausrichtung durchzuführen. Setzen Sie als Nächstes den Wert Left auf das Attribut Float und klicken Sie auf die Schaltfläche Apply. Setzen Sie alle Listenelemente auf eine Zeile. Damit sie sauber platziert werden und nicht übereinander kriechen, setzen Sie im Attribut Breite den Wert Position auf 150 px. Überprüfen Sie, ob alle Elemente der Liste die gleiche Größe haben. Als nächstes entfernen Sie die Punkte vor allen Elementen - gehen Sie dazu zum List-Attribut und setzen Sie den None-Parameter im Eintrag vom Typ List Style. Klicken Sie auf OK, damit alle Änderungen akzeptiert und angewendet werden.

Schritt 3

Passen Sie die Schriftgröße und den Stil für die ul li an. Gehen Sie dazu zu Stile verwalten und klicken Sie mit der rechten Maustaste auf das Ulli, und wählen Sie dann Stil ändern. Das bekannte Dialogfeld wird angezeigt. Gehen Sie zu Font, wählen Sie das Attribut Font-family und setzen Sie es auf Sans-serif, Arial, Helvetica. Passen Sie als Nächstes die Schriftgröße an, indem Sie sie auf 0, 9 setzen. Setzen Sie danach das Text-transform-Attribut auf Großbuchstaben. Passen Sie die Höhe der Menüelemente im Attribut Höhe - Position an und setzen Sie den Wert auf 30 px.

Schritt 4

Nachdem Sie alle Korrekturmaßnahmen abgeschlossen haben, speichern Sie die Datei als menu.html. Testen Sie als Nächstes das erstellte Menü in verschiedenen Browsern, um sicherzustellen, dass es richtig funktioniert. Wie Sie sehen, ist das Design des horizontalen Menüs recht einfach.

Empfohlen: