Ob das Navigationsmenü Ihrer Website eine horizontale Reihe oben oder eine vertikale Reihe unten ist, es ist nur eine Liste. Beim Entwerfen Webnavigation, ein Navigationsmenü ist eine Gruppe von Links. Wenn Sie Ihre Navigation mit XHTML+CSS programmieren, können Sie ein kleines Menü erstellen, das zum Herunterladen (XHTML) und zum Anpassen (CSS) einfach ist.
Einstieg
Um eine Liste für die Navigation zu entwerfen, müssen Sie eine Liste verwenden. Es kann sich um eine ungeordnete Standardliste handeln, die als Navigation identifiziert wurde. Beispielsweise:
- Zuhause
- Produkte
- Dienstleistungen
- Kontaktiere uns
Beim Betrachten des HTML-Codes hat der Home-Link eine ID von.
du bist hier
Auf diese Weise können Sie ein Menü erstellen, das den aktuellen Standort für Ihre Leser identifiziert. Auch wenn Sie diese Art von visuellen Hinweisen derzeit nicht auf Ihrer Website haben möchten, können Sie diese Informationen hinzufügen. Wenn Sie den Cue später hinzufügen möchten, haben Sie weniger Codierung zum Vorbereiten Ihrer Site.
Ohne irgendetwas CSS-Styling, dieses XHTML-Menü sieht aus wie eine standardmäßige ungeordnete Liste. Es gibt Aufzählungszeichen und die Listenelemente sind leicht eingerückt. Beim Benutzen Platzhalter-Links, zeigen die meisten Browser die Links nicht als anklickbar an (unterstrichen und blau). Wenn Sie den HTML-Code in eine Webseite einfügen, sieht Ihre Navigation wie folgt aus:
- Zuhause
- Produkte
- Dienstleistungen
- Kontaktiere uns
Das sieht nicht nach einem Menü aus. Mit ein paar CSS-Stilen, die der Liste hinzugefügt werden, können Sie jedoch ein Menü erstellen, das Sie stolz macht.
Wenn Sie weitere Beispiele für vertikale Menüs wünschen, führen Sie eine Websuche nach folgenden Punkten durch:
- Ein gestyltes vertikales Menü
- Eine grundlegende vertikale Menüvorlage
- Ein gestyltes vertikales Menü mit You Are Here
- Eine einfache vertikale Menüvorlage mit You Are Here
Vertikales Navigationsmenü
Ein vertikales Navigationsmenü ist einfach zu schreiben, da es wie eine normale Liste angezeigt wird: nach oben und unten. Die Listenelemente werden vertikal nach unten auf der Seite angezeigt.
Beginnen Sie beim Gestalten von Menüs außen und arbeiten Sie nach innen. Stylen Sie zuerst die Navigation:
ul#navigation
Wechseln Sie dann zu den Elementen und Links. Definieren Sie zunächst die Breite des Menüs. Dadurch wird sichergestellt, dass bei langen Menüelementen der Rest des Layouts nicht verschoben wird oder horizontales Scrollen verursacht wird.
ul#navigation { Breite: 12em; }
Nachdem Sie die Breite festgelegt haben, bearbeiten Sie die Listenelemente. Auf diese Weise können Sie Dinge wie Hintergrundfarben, Rahmen, Textausrichtung und Ränder festlegen.
ul#navigation li {
Listenstil: keine;
Hintergrundfarbe: #039;
Rahmen oben: einfarbig 1px #039;
Textausrichtung: links;
Rand: 0;
}
Nachdem Sie die Grundlagen für die Listenelemente festgelegt haben, arbeiten Sie daran, wie das Menü im Linkbereich aussieht. Stylen Sie zuerst die Navigation:
UL#Navigation LI A
Dann stylen Sie Folgendes:
Eine Verbindung
A: besucht
A: schweben
A: aktiv
Machen Sie für die Links die Links zu einem Blockelement (anstelle des standardmäßigen Inline-Elements). Dies zwingt Links dazu, den gesamten Platz des LI einzunehmen und sich wie ein Absatz zu verhalten, wodurch Links einfacher als Menüschaltflächen gestaltet werden können. Entfernen Sie dann Folgendes:
unterstreichen, Textdekoration: keine; wie
Dadurch sehen die Schaltflächen eher wie Schaltflächen aus. Ihr Design kann anders sein.
ul#navigation li a {
Bildschirmsperre;
Textdekoration: keine;
Polsterung: .25em;
Rahmen-unten: solide 1px #39f;
Rahmen rechts: durchgehend 1px #39f;
}
Mit dem Bildschirmsperre; auf den Links gesetzt, ist die gesamte Box des Menüpunktes anklickbar, nicht nur die Buchstaben. Dies ist auch gut für die Benutzerfreundlichkeit. Legen Sie die Linkfarben (Link, Besucht, Hover und Aktiv) fest, wenn die Links sich von den Standardfarben Blau, Rot und Violett unterscheiden sollen.
a: Link, a: besucht { color: #fff; }
a: schweben, a: aktiv { color: #000; }
Sie können dem Hover-Zustand auch etwas Aufmerksamkeit schenken, indem Sie die Hintergrundfarbe ändern.
a: hover { Hintergrundfarbe: #fff; }
Horizontales Navigationsmenü
Das Erstellen horizontaler Navigationsmenüs ist etwas schwieriger als vertikale Navigationsmenüs, da Sie die Tatsache ausgleichen müssen, dass HTML-Listen die vertikale Anzeige bevorzugen. Erstellen Sie wie beim horizontalen Menü die Navigationsmenüliste:
- Zuhause
- Produkte
- Dienstleistungen
- Kontaktiere uns
Um ein horizontales Menü zu erstellen, gehen Sie genauso vor wie mit dem vertikalen Menü. Beginnen Sie mit der Außenseite und arbeiten Sie nach innen. Um die Navigation in der linken Ecke zu starten, setzen Sie sie mit 0 linkem Rand und Auffüllung und schweben Sie sie nach links.
Gewöhnen Sie sich an, die Breite so einzustellen, dass Ihr Menü nicht mehr oder weniger Platz einnimmt, als Sie beabsichtigen. Bei horizontalen Menüs ist dies normalerweise die volle Breite des Designs. Sie können auch hinzufügen eine Hintergrundfarbe in die Liste, um das Lesen zu erleichtern.
ul#navigation {
Schwimmer: links;
Rand: 0;
Polsterung: 0;
Breite: 100 %;
Hintergrundfarbe: #039;
}
Das Geheimnis des horizontalen Navigationsmenüs liegt in den Listenelementen. Listenelemente sind normalerweise Blockelemente, was bedeutet, dass vor und nach jedem dieser Elemente ein Zeilenumbruch steht. Durch das Umschalten der Darstellung von Block auf Inline erzwingen Sie eine horizontale Anordnung der Listenelemente.
ul#navigation li { display: inline; }
Behandeln Sie die Links genauso wie das vertikale Navigationsmenü, mit den gleichen Farben und Textdekorationen. Fügen Sie einen oberen Rahmen hinzu, um die Schaltflächen abzugrenzen, wenn der Benutzer mit der Maus über eine Schaltfläche fährt. Dann entfernen Bildschirmsperre; da dies die Zeilenumbrüche wieder einfügt und das horizontale Menü zerstört.
Sie sind hier Standortinformationen
Ein weiterer Aspekt von HTML ist dieser Bezeichner:
du bist hier
Wenn Sie Ihr Menü ändern möchten, um den aktuellen Standort Ihrer Benutzer anzuzeigen, verwenden Sie diese ID, um eine andere Hintergrundfarbe oder einen anderen Stil zu definieren. Verschieben Sie diese Attribut-ID in das richtige Menüelement auf anderen Seiten, damit die aktuelle Seite immer hervorgehoben wird.
Wenn Sie diese Stile auf Ihrer Seite zusammenstellen, können Sie eine horizontale oder vertikale Menüleiste erstellen, die mit Ihrer Site funktioniert und schnell heruntergeladen und leicht aktualisiert werden kann. Die Verwendung von XHTML+CSS macht Ihre Listen zu einem leistungsstarken Werkzeug für das Design.
Wenn Sie weitere Beispiele für horizontale Menüs wünschen, suchen Sie im Internet nach den folgenden Elementen:
- Ein gestyltes horizontales Menü
- Eine grundlegende horizontale Menüvorlage
- Ein gestyltes horizontales Menü mit You Are Here
- Eine grundlegende horizontale Menüvorlage mit You Are Here