CSS-Navigationsleiste


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Demo: Navigationsleisten


Navigationsleisten

Eine benutzerfreundliche Navigation ist für jede Website wichtig.

Mit CSS können Sie langweilige HTML-Menüs in gut aussehende Navigationsleisten verwandeln.


Navigationsleiste=Linkliste

Eine Navigationsleiste benötigt Standard-HTML als Basis.

In unseren Beispielen erstellen wir die Navigationsleiste aus einer Standard-HTML-Liste.

Eine Navigationsleiste ist im Grunde eine Liste von Links, daher ist die Verwendung der Elemente <ul> und <li> perfekt Sinn:

Beispiel

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>


Entfernen wir nun die Aufzählungszeichen sowie die Ränder und den Innenabstand aus der Liste:

Beispiel

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Beispiel erklärt:

list-style-type: none;

- Entfernt die Kugeln. Eine Navigationsleiste benötigt keine Listenmarkierungen

margin: 0;

um die Standardeinstellungen des Browsers zu entfernen

padding: 0;

um die Standardeinstellungen des Browsers zu entfernen

Der Code im obigen Beispiel ist der Standardcode, der sowohl in vertikalen als auch horizontalen Navigationsleisten verwendet wird, über den Sie in den nächsten Kapiteln mehr erfahren werden.