Die Menüerstellung ist wahrscheinlich einer der Hauptpunkte bei der Entwicklung von Websites und Programmen. Darüber hinaus ist eine gute Ausarbeitung und logische Gestaltung eines solchen Menüs das Gesicht einer Site oder eines beliebigen Programms. Nehmen wir zum Beispiel Microsoft und das Betriebssystem Windows 7. Nach der Veröffentlichung von Windows 7 hörte Microsoft viel Kritik, die für sich selbst nicht schmeichelhaft war. Es gab viele Kritikpunkte, aber meistens unpraktisch positionierte Menüpunkte Lesen Sie dieses Tutorial zum Erstellen eines horizontalen Dropdown-Menüs mit CSS und Expression Web sorgfältig durch. Tag-Stile ändern sich, um das Menü zu erstellen
Anweisungen
Schritt 1
Gehen Sie zu Stile verwalten und klicken Sie dann auf die Schaltfläche Neuer Stil. Geben Sie dem neuen Stil, den Sie gerade erstellt haben, den Namen Selector ul li. Denken Sie auch daran, dass der neue Stil in der Datei drop-down.css definiert sein muss.
Schritt 2
Um ein horizontales Menü zu dehnen, müssen Sie den Menüelementen mitteilen, dass es horizontal sein wird. Als nächstes müssen Sie die Breite jedes Menüpunkts bestimmen und alle unnötigen Punkte vor allen Listenelementen entfernen.
Schritt 3
Gehen Sie für die horizontale Ausrichtung zu Layout und setzen Sie das Anzeigeattribut auf Inline. Setzen Sie das float-Attribut auf left. Klicken Sie auf die Schaltfläche Übernehmen. Alle Listenelemente müssen auf eine Zeile gesetzt werden. Damit sie sich nicht überlappen, müssen Sie Folgendes tun: Setzen Sie den Positionswert des width-Attributs auf 150px. Jetzt schau es dir an. Alle Elemente der Liste sollten die gleiche Größe haben.
Schritt 4
Jetzt müssen wir versuchen, die Punkte vor den Listenelementen zu entfernen. Gehen Sie dazu zu List und setzen Sie das list-style-Attribut –type auf none.
Schritt 5
Klicken Sie auf OK, um alle Änderungen zu übernehmen.
Schritt 6
Um die Schriftgröße für den Ulli-Stil anzupassen, müssen Sie Folgendes tun. Klicken Sie unter Stile verwalten mit der rechten Maustaste auf den Ulli-Stil, den Sie benötigen, um Stil ändern auszuwählen. Das bekannte Dialogfeld zum Hinzufügen oder Ändern von Attributen wird geöffnet. Gehen Sie zur Kategorie Schriftart und setzen Sie das Attribut font-family auf Arial, Helvetica, Sans-Serif. Gehen Sie als Nächstes zum Attribut font-size und setzen Sie es auf 0.9em. Richten Sie danach das Attribut text-transform ein und setzen Sie den Wert auf Großbuchstaben.
Schritt 7
Die Höhe der Elemente im erstellten Menü kann in der Kategorie Position angepasst werden. Setzen Sie das Höhenattribut auf 30px.
Schritt 8
Als nächstes müssen Sie die Datei menu.html speichern. Dazu öffnet Expression Web das erforderliche Fenster Eingebettete Dateien speichern, um die Datei zu speichern. Speichern Sie in der Datei drop-down.css. Klicken Sie zum Speichern auf OK.
Schritt 9
Überprüfen Sie nun Ihr Ergebnis. Aus Gründen der Zuverlässigkeit ist es besser, es in verschiedenen Browsern zu testen. Um das im Standardbrowser erhaltene Ergebnis zu überprüfen, müssen Sie die Taste F12 auf Ihrer Tastatur drücken.
