Nahezu jede Website braucht ein Navigationsmenü, wenn sie mehrere Seiten umfasst.
Sie können ein einfaches Navigationsmenü erstellen, über das Besucher leicht durch Ihre Website navigieren können, anhand von CSS, Listen und dem „nav“-Element.
Laden Sie bei Bedarf die Projektdateien herunter, und extrahieren Sie sie, um die folgenden Schritte nachvollziehen zu können.
Hier habe ich eine fast fertige Seite.
Ich muss nur noch diese unsortierte Liste formatieren, um daraus ein Hauptmenü zur Navigation durch die Website zu machen.
In der Ansicht „Teilen“ (Split) sehen Sie, dass die unsortierte Liste sich innerhalb des „nav“-Elements für die Seite befindet.
Der „nav“-Abschnitt enthält die Haupt-Links für die Navigation.
Ich habe hier bereits Anker-Links hinzugefügt, die diese Listenelemente in Hyperlinks umwandeln.
Sehen wir uns die Datei in einem Webbrowser an.
Wählen Sie dazu im Menü „Datei“ (File) die Option „Vorschau im Browser“ (Preview in Browser).
Ich kann nun die Links testen – und sie funktionieren auch.
Allerdings sind sie noch nicht wie das Hauptmenü einer Web-Seite formatiert.
Ich kehre zurück zu Dreamweaver, um das zu korrigieren.
Ich habe bereits vorgearbeitet und eine CSS-Regel für den „nav“-Selektor erstellt.
Ich suche diesen nun im CSS Designer, damit wir ihn uns ansehen können.
Mit dieser Regel wird die Navigation rechts auf der Seite positioniert, wo ich sie haben will.
Es gibt aber noch weitere Eigenschaften, mit denen man das Menü ansprechend formatieren kann.
Zunächst möchte ich die Aufzählungszeichen entfernen.
Da diese Eigenschaft für die gesamte Liste gelten soll, wähle ich im CSS Designer die Datei „style.css“ aus und klicke hier oben auf meine CSS-Datei.
Nun kann ich alle Änderungen in Echtzeit verfolgen.
Ich kehre zum CSS Designer zurück und füge einen UL-Selektor hinzu.
Im Abschnitt „Eigenschaften“ (Properties) rufe ich die Kategorie „Text“ auf und setze die Eigenschaft „list-style-type“ auf „none“ (Ohne).
Die Aufzählungszeichen werden nicht mehr angezeigt, die Listenelemente sind aber immer noch untereinander angeordnet.
Einige HTML-Elemente wie z.
B.
Listenelemente werden standardmäßig jeweils in einer neuen Zeile angezeigt, sofern man das nicht per CSS anders definiert hat.
Daher ändere ich den vorhandenen LI-Selektor, der die aktuellen Einstellungen für die Schrift und die Abstände enthält.
Ich füge die Eigenschaft „display“ hinzu und gebe als Wert „in-line block“ an.
Die Listenelemente werden nun nebeneinander in einer Zeile dargestellt.
Als letzte Maßnahme füge ich CSS-Code hinzu, damit sich die Textfarbe ändert, sobald der Besucher mit der Maus über einen Menü-Link fährt.
Mithilfe sogenannter Pseudoselektoren kann man Elemente formatieren, deren Zustand sich ändert, wenn z.
B. ein Besucher den Cursor über einen Link bewegt.
Ich füge also jetzt einen Pseudoselektor für den Anker bzw.
A-Selektor hinzu.
Dazu wechsle ich zum CSS Designer und füge einen neuen Selektor hinzu.
Als Namen gebe ich ein „a“ für das Anker-Tag gefolgt von einem Doppelpunkt und der Aktion ein, in diesem Fall „hover“.
Ich navigiere anschließend zur Kategorie „Text“ und ändere die Farbe in Rot.
Wenn ich nun in der Live-Ansicht den Cursor über ein Listenelement bewege, sehe ich eine dezente Veränderung, die das Erscheinungsbild und das Anwendererlebnis aber deutlich verbessert.
Das Hauptmenü Ihrer eigenen Seite hat vielleicht andere Eigenschaften, z.
B. eine andere Anzahl von Menüelementen, andere Farben und eine andere Positionierung auf der Seite, aber mit den hier gezeigten Grundtechniken können Sie jedes Menü einer Web-Seite formatieren.
Vielleicht kommen auch CSS-Transitions infrage, die verschiedene Effekte für das Menü erzeugen, wenn ein Besucher mit Inhalten auf Ihrer Web-Seite interagiert.
