CSS: Menüs

Erstellt: 03.06.2005 | Aktualisiert: 16.04.2007

Mit Hilfe von CSS können normalen XHTML-Listen in horizontale Menüs verwandelt werden.

Links zum Thema

Liste

Ausgangspunkt zur Gestaltung eines horizontalen Menüs ist eine normale XHTML-Liste.

Grundgestaltung

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

#menu a {
 display: block;
 color: #fff;
 background-color: #990;
 width: 8em;
 padding: 0.5em 1em;
 text-decoration: none;
}

#menu a:hover {
 background-color: #660;
}

Die Abstände (margin, padding) werden auf “0″gesetzt, da die Browser Standard-Abstände bei Listen setzen. Die Bullets werden entfernt (list-style-type). Rollover-Effekt wird bei den Selektoren #menu a und #menu a:hover definiert.

Horizontal anordnen (Variante 1)

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

#menu li {
 float: left;
 text-align: center;
}

#menu a {
 display: block;
 color: #fff;
 background-color: #990;
 width: 8em;
 padding: 0.5em 1em;
 text-decoration: none;
}

#menu a:hover {
 background-color: #660;
}

Einzig durch Deklaration float des li-Tag wird das vertikale Menu in ein horizontales Menu verwandelt. float: left bewirkt, dass das Element (Menupunkt) links steht und alle folgenden rechts davon positioniert werden. text-align: center positioniert den Text in der Mitte.

Horizontal anordnen (Variante 2)

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

#menu ul li {
 display: inline;
 text-align: center;
}

#menu ul li a {
 color: #fff;
 background-color: #990;
 width: 8em;
 padding: 0.5em 1em;
 text-decoration: none;
}

#menu ul li a:hover {
 background-color: #660;
}

In der Variante 2 werden die Blockelemente ul und li zu eingebundenen Elementen, die frei hintereinander fliessen.

Verwandte Snippets

Weblinks