CSS-Navigationsleiste

Demonstration: Navigationsleiste

Vertikale Navigationsleiste

Horizontale Navigationsleiste


Navigationsleiste

Eine benutzerfreundliche Navigationsleiste ist für jede Website wichtig.

Durch die Verwendung von CSS können Sie langweilige HTML-Menüs in ansprechende Navigationsleisten umwandeln.

Navigationsleiste = Liste von Links

Die Navigationsleiste erfordert ein Standard-HTML als Grundlage.

In unserem Beispiel wird die Navigationsleiste mit einem Standard-HTML-Listen aufgebaut.

Die Navigationsleiste ist im Grunde eine Liste von Links, daher ist es sinnvoll, die <ul> und <li>-Elemente zu verwenden:

Beispiel

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Nachrichten</a></li>
  <li><a href="contact.asp">Kontakt</a></li>
  <li><a href="about.asp">Über</a></li>
</ul>

Probieren Sie es selbst aus

Nun entfernen Sie die Punkte der Liste sowie den Abstand und den Rand (Füllung) aus der Liste:

Beispiel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Probieren Sie es selbst aus

Beispiel-Erklärung:

  • list-style-type: none; - Entfernen Sie die Liste der Punkte. Die Navigationsleiste benötigt keine Listenpunktmarken.
  • Einstellen margin: 0; und padding: 0; Löschen Sie die Standardsätze des Browsers.

Der im obigen Beispiel verwendete Code ist der Standardcode für vertikale und horizontale Navigationsleisten, und Sie werden im nächsten Kapitel mehr darüber lernen.