Ob es sich bei Ihrem Navigationsmenü um eine horizontale Reihe oben oder um eine vertikale Reihe neben der Seite handelt, ist es immer noch nur eine Liste. Beim Entwerfen der Webnavigation wird oft vergessen, dass ein Navigationsmenü nur eine glorifizierte Gruppe von Links ist. Wenn Sie Ihre Navigation jedoch mit XHTML + CSS programmieren, können Sie ein Menü erstellen, das klein ist (XHTML) zum Herunterladen und leicht anpassbar (CSS).
Fertig machen
Um eine Liste für die Navigation zu erstellen, müssen Sie eine Liste verwenden. Es kann sich um eine ungeordnete Standardliste handeln, die als Navigation identifiziert wurde:
Wenn Sie sich den HTML-Code genau ansehen, werden Sie feststellen, dass der Link "Startseite" auch eine ID von hat
du bist hier. Auf diese Weise können Sie ein Menü erstellen, das den aktuellen Standort für Ihre Leser angibt. Auch wenn Sie gerade nicht vorhaben, diese Art visueller Hinweise auf Ihrer Website zu haben, können Sie diese Informationen hinzufügen. Wenn Sie sich entscheiden, den Cue später hinzuzufügen, haben Sie weniger Code, um Ihre Site vorzubereiten.
Ohne ein CSS-Styling sieht dieses XHTML-Menü wie eine ungeordnete Standardliste aus. Es gibt Aufzählungszeichen und die Listenelemente sind leicht eingerückt. Da ich Platzhalter-Links verwende, werden die Links in den meisten Browsern nicht als anklickbar (unterstrichen und blau) angezeigt. Wenn Sie den obigen HTML-Code in eine Webseite einfügen, sieht Ihre Navigation folgendermaßen aus:
- Zuhause
- Produkte
- Dienstleistungen
- Kontaktiere uns
Das ist ziemlich langweilig und sieht nicht nach einem Menü aus. Wenn Sie der Liste jedoch nur ein paar CSS-Stile hinzufügen, können Sie ein Menü erstellen, das Sie stolz macht.
Vertikales Navigationsmenü
Ein vertikales Navigationsmenü ist sehr einfach zu schreiben, da es wie eine normale Liste angezeigt wird: auf und ab. Die Listenelemente werden vertikal auf der Seite angezeigt.
Wenn ich Menüs stylen möchte, fange ich am liebsten an der Außenseite an und arbeite darin. Damit meine ich, dass ich zuerst die
ul # navigation und dann auf die
li Elemente und dann die Verknüpfungen usw. Für dieses Menü definieren Sie zunächst die Breite des Menüs. Dadurch wird sichergestellt, dass selbst wenn die Menüelemente lang sind, der Rest des Layouts nicht verschoben oder horizontal verschoben wird.
ul # navigation {width: 12em; }
Sobald ich die Breite eingestellt habe, kann ich mit den Listenelementen spielen. Dadurch kann ich Dinge wie (zum Entfernen der Aufzählungszeichen), Hintergrundfarben, Ränder, Textausrichtung und Ränder einstellen.
ul # navigation li {Listenstil: keine;Hintergrundfarbe: # 039;Border-Top: fest 1px # 039;Text ausrichten: links;Marge: 0;} Nachdem Sie die Grundlagen für die Listenelemente festgelegt haben, können Sie mit dem Aussehen des Menüs im Linkbereich beginnen. Erster Stil der UL # navigation LI Aund dann die Eine Verbindung, A: besucht, A: schweben, und A: aktiv (wenn du sie willst). Für die Links möchte ich die Links gerne zu einem Blockelement machen (und nicht zum Standard-Inline-Element). Dies zwingt sie dazu, den gesamten Raum der LI-Und sie wirken eher wie ein Absatz, was sie einfacher als Menütasten gestaltet. Die andere Sache, die ich immer tue, ist das Entfernen der Unterstreichung ( Textdekoration: keine;), da die Tasten dadurch für mich wie Tasten aussehen. Aber Ihr Design kann natürlich anders sein. ul # navigation li a {Bildschirmsperre;Textdekoration: keine;Polsterung: .25em;Rahmen unten: fest 1px # 39f;rechts: fest 1px # 39f;} Beachten Sie das mit der Bildschirmsperre; Wenn Sie auf die Links klicken, können Sie auf das gesamte Feld des Menüelements klicken, nicht nur auf die Buchstaben. Dies ist auch gut für die Benutzerfreundlichkeit. Stellen Sie sicher, dass Sie die Link-Farben (Link, Besuch, Schwebeflug und Aktiv) einstellen, wenn Sie möchten, dass sie von den Standardwerten Blau, Rot und Lila abweichen. a: link, a: besuchte {color: #fff; }a: schweben, a: aktiv {color: # 000; } Ich möchte auch dem Schwebeflugzustand etwas mehr Aufmerksamkeit schenken, indem ich die Hintergrundfarbe verändere. a: hover {Hintergrundfarbe: #fff; } Wenn Sie weitere Beispiele für vertikale Menüs wünschen, lesen Sie die nachstehende Liste. 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ü zunächst Ihre Navigationsmenüliste:
Um ein horizontales Menü zu erstellen, gehen Sie genauso vor wie mit dem vertikalen Menü. Beginnen Sie mit dem Äußeren und arbeiten Sie innen. Da meine Navigation in der linken Ecke beginnen soll, setze ich sie mit 0 linken Rand und Polsterung ein und schwebe sie nach links. Sie sollten sich auch daran gewöhnen, die Breite so einzustellen, dass Ihr Menü nicht mehr oder weniger Platz beansprucht, als Sie beabsichtigen. Bei horizontalen Menüs ist dies normalerweise die gesamte Breite des Designs. Ich habe der gesamten Liste auch eine Hintergrundfarbe hinzugefügt, um das Lesen zu erleichtern. ul # navigation {Schwimmer: links;Marge: 0;Polsterung: 0;Breite: 100%;Hintergrundfarbe: # 039;} Das Geheimnis des horizontalen Navigationsmenüs liegt jedoch in den Listenelementen. Listenelemente sind normalerweise Blockelemente, das heißt, sie werden vor und hinter jedem Zeilenumbruch platziert. Durch Umschalten der Anzeige von Block zu in der ReiheSie zwingen die Listenelemente, sich horizontal nebeneinander aufzustellen. ul # navigation li {display: inline; } Ich habe die Links genauso behandelt, wie ich sie im vertikalen Navigationsmenü behandelt habe, mit denselben Farben und Textverzierungen. Ich fügte einen oberen Rand hinzu, um die Schaltflächen zu beschreiben, wenn sie über den Zeigefenstern stehen. Das einzige, was entfernt wurde, war das Bildschirmsperre; Dadurch werden die Zeilenumbrüche zurückgesetzt und das horizontale Menü zerstört. ul # navigation li a {Textdekoration: keine;Polsterung: .25em 1em;Rahmen unten: fest 1px # 39f;Border-Top: fest 1px # 39f;rechts: fest 1px # 39f;}a: link, a: besuchte {color: #fff; }ul # navigation li a: hover {Hintergrundfarbe: #fff;Farbe: # 000;} Ein weiterer Aspekt von HTML ist der Bezeichner du bist hier. Wenn Sie Ihr Menü ändern möchten, um den aktuellen Standort Ihrer Benutzer anzugeben, verwenden Sie dies einfach ICH WÜRDE um eine andere Hintergrundfarbe oder einen anderen Stil zu definieren. Bewegen Sie dieses Attribut ICH WÜRDE zum richtigen Menüelement auf anderen Seiten, sodass die aktuelle Seite immer hervorgehoben wird. ul # navigation li # youarehere a {Hintergrundfarbe: # 09f; } Wenn Sie diese Stile auf Ihrer Seite zusammenstellen, können Sie eine horizontale oder vertikale Menüleiste erstellen, die für Ihre Website geeignet ist, aber schnell heruntergeladen werden kann und in Zukunft sehr einfach zu aktualisieren ist. Die Verwendung von XHTML + CSS macht Ihre Listen zu einem sehr leistungsfähigen Werkzeug für das Design. Weitere Beispiele für horizontale Menüs finden Sie in den folgenden Abschnitten.
Horizontales Navigationsmenü
Sie sind hier Standortinformationen
