CSS- Navigationsleiste
Demo: Navigationsleisten
Vertikal
Navigationsleisten
Eine benutzerfreundliche Navigation ist für jede Website wichtig.
Mit CSS verwandeln Sie langweilige HTML-Menüs in gut aussehende Navigationsleisten.
Navigationsleiste = Linkliste
Eine Navigationsleiste benötigt Standard-HTML als Basis.
In unseren Beispielen bauen wir die Navigationsleiste aus einer Standard-HTML-Liste auf.
Eine Navigationsleiste ist im Grunde eine Liste von Links, daher ist die Verwendung der Elemente <ul> und <li> durchaus sinnvoll:
Beispiel
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Entfernen wir nun die Aufzählungszeichen und die Ränder und Polsterung aus der Liste:
Beispiel
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Beispiel erklärt:
list-style-type: none;- Entfernt die Kugeln. Eine Navigationsleiste benötigt keine Listenmarkierungen- Festlegen
margin: 0;undpadding: 0;Entfernen der Standardeinstellungen des Browsers
Der Code im obigen Beispiel ist der Standardcode, der sowohl in vertikalen als auch in horizontalen Navigationsleisten verwendet wird, über den Sie in den nächsten Kapiteln mehr erfahren werden.