Eine Navigationsleiste besteht aus einem grafischen Bild, das in einer Reihe von Tabellenzellen platziert ist. Da die Verwendung von Tabellen zum Auffinden von Seiteninhalten, die keine Tabellen sind, nicht mehr empfohlen wird, suchen viele Web-Entwickler nach (neuen) Möglichkeiten, strukturierte Inhalte zu verwenden
XHTML-Markup und CSS-Formatierung zum Erstellen von Navigationsleisten.
Eine einfache CSS-Navigationsleiste
Die vielleicht einfachste Lösung zum Erstellen einer Textnavigationsleiste im CSS-Stil besteht darin, alle Links in einer einzigen Textzeile zu platzieren, wie in Beispiel A.
Dieser Ansatz erscheint vernünftig und intuitiv. Das Problem besteht jedoch darin, dass es schwierig ist, den Leerraum zwischen den Links sowie davor und danach zu kontrollieren, wenn alle Links in einer Textzeile platziert werden. Um zu vermeiden, dass alle Ihre Links überfüllt sind, sollten Sie das besser tun
Danach müssen Sie normalerweise Pipes (vertikale Balken) und Leerzeichen, die keine Zeilenumbrüche sind, als Trennzeichen einfügen.
Wie der folgende Code zeigt, ist das Ergebnis kaum das klare, strukturierte Markup, das wir uns wünschen.
| Nachfolgend der zitierte Inhalt: <div id="navbar1"> <a href="link1a.html">Schaltfläche 1</a> | href="link2a.html ">Schaltfläche 2</a> |. <a href="link3a.html "> Taste 3</a> </div> |
Listenbasierte CSS-Navigationsleiste Eine andere Möglichkeit, eine CSS-Navigationsleiste zu erstellen, besteht darin, die Tags <ul> und <li> zu verwenden, um Links als ungeordnete Liste darzustellen.
Auf den ersten Blick erscheint die Verwendung einer ungeordneten Liste für eine Navigationsleiste kontraintuitiv, da wir es gewohnt sind, uns eine ungeordnete Liste als eine vertikal nach oben verschobene Liste von Elementen vorzustellen, mit einem Aufzählungszeichen vor jedem Element. Dies scheint nicht mit der horizontalen Ausrichtung der Navigationsleiste vereinbar zu sein.
Die logische Struktur einer Liste als Sammlung unabhängiger Listenelemente kann jedoch auf Links in der Navigationsleiste angewendet werden, und CSS-Regeln ermöglichen es Ihnen, die Standarddarstellung von Listenelementen zu überschreiben, Aufzählungszeichen zu entfernen und stattdessen Listenelemente auf der Seite anzuordnen des Schwimmers unten.
In diesem Wissen schauen wir uns nun Beispiel B an und erstellen eine Navigationsleiste im CSS-Stil und mit XHTML-Beschriftung basierend auf einer ungeordneten Liste.
Hier ist das XHTML-Markup:
| Nachfolgend der zitierte Inhalt: <div id="navbar2"> |
Hier ist der CSS-Code zum Konvertieren einer Liste von Textlinks in eine Navigationsleiste:
| Nachfolgend der zitierte Inhalt: div#navbar2 { |