Erstellen eines Navigationsmenü mit einer ungeordneten Liste und CSS, BIOSTALL
Bei weitem die einfachste, sauberste, leichteste und flexibelste Weg, um eine horizontale Navigationsmenü zu erstellen, ist eine ungeordnete Liste und Stil mit CSS zu verwenden. Ich werde Ihnen zeigen, mit einer Standardliste starten, wie ein voll funktionsfähiges Menü inklusive Formatierung und Funktionalität zu schaffen.
So erstellen Sie eine Standard ungeordnete Liste wir folgende HTML verwenden:
Dies erzeugt eine Liste, die wie so aussieht:
Nicht sehr attraktiv oder horizontal huh. Das erste, was wir tun müssen, ist eine Referenz / ID in die Liste übernehmen und einige grundlegende CSS erstellen, so dass unsere HTML-Code sieht nun wie folgt aus:
Und unser CSS sieht so aus:
OK gut. Sie sollten nun eine Navigation, die wie etwas aussieht:
Wenn dies der Fall machen wir gute Fortschritte. Es ist jetzt horizontal und ein Navigationsmenü in seiner primitivsten Form. So was haben wir oben?
list-style-type: keine
Die ‚list-style-type‘ Attribut können Sie die Art der Liste gesetzt zu verwenden. Standardmäßig verwendet er die schwarze, runde Kugel, aber das verändert werden kann ein Quadrat oder einen weißen Kreis zu verwenden. In diesem Fall haben wir es ‚keine‘, so dass wir eine einfache Liste ohne Symbole erhalten.
Jetzt haben wir ein einfaches Menü an Ort und Stelle, läßt auf die es hübsch aussehen bewegen und einige Formatierungen hinzuzufügen. Ich möchte eine Hintergrundfarbe hinzufügen, etwas Padding hinzufügen und den Text korrekt auszurichten. Tun bleibt diese unser HTML das gleiche, aber unser CSS könnte etwa so aussehen:
Als Ergebnis der oben Speisekarte hat jetzt eine Hintergrundfarbe, formatierten Text und Polsterung. Außerdem habe ich eine Klasse, um die Hintergrundfarbe zu ändern, wenn jemand über einen unserer Menüpunkte rollt. Wir sollten jetzt etwas, das wie so aussieht: