Vertikale Listennavigationen
Nach obenTeil 1
Eine vertikale Navigation ist ein wenig leichter als die horizontalen Listen aus den vorherigen Beispielen, da man nicht für die horizontale Ausrichtung sorgen muß.
Man muß lediglich eine CSS-Angabe weniger für die Listenelemente machen als im 2. Teil, da float:left; ja für die horizontale Anordnung sorgt. Das Markup ist wiederum dasselbe.
<ul id="navigation">
<li><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
<li><a href="#">Link 04</a></li>
<li><a href="#">Link 05</a></li>
</ul>
ul#navigation li
{
margin: 0;
padding: 0;
text-align: center;
/* statt float:left; keine Angabe */
}
Jetzt muß nur noch die Breite der Listenelemente und der Liste verändern und man wäre bereits fertig. Nur soll in diesem Beispiel die Liste etwas schöner formatiert werden: Die Navigation sowie die einzelnen Menüpunkte sollen einen Rahmen bekommen.
Aufgabenstellung:
- Navigationsbreite soll 200px betragen
- Liste und Listenelemente sollen einen Rahmen bekommen
- Beispiel
Zu 01: Diese Vorgabe ist schnell erledigt. Man muss lediglich die Listenbreite und die der Listenelemente den Wert 200px zuweisen:
ul#navigation, ul#navigation li a
{
width: 200px;
}
Zu 02: Man könnte einfach jedem Listenelement einen Rand zuweisen, dann würde jedoch zwischen den Buttons die Linie doppelt so stark dargestellt werden.
Um dies zu umgehen machen wir um die gesamte Navigation einen Rahmen - bis auf die Unterseite. Die Buttons bekommen hingegen nur einen unteren Rahmen, damit keine doppelten Ränder entstehen.
Das CSS sieht folgendermaßen aus:
ul#navigation
{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
ul#navigation li
{
border-bottom: 1px solid #ccc;
}
Damit wäre man schon fertig. Noch einmal der komplette Code:
ul#navigation
{
width: 200px;
margin: 2em;
padding: 0;
list-style: none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
ul#navigation li
{
margin: 0;
padding: 0;
text-align: center;
border-bottom: 1px solid #ccc;
}
ul#navigation li a
{
display: block;
height: 22px;
width: 200px;
padding-top: 4px;
background: #990000;
text-decoration: none;
color: #eaeaea;
}
ul#navigation li a:hover
{
background-color: #CC0000;
}
Zu 03: Hier gibt es eine Demonstration der Navigation.
Salz`
Wäre:
ul#navigation
{
border: 1px solid #ccc;
border-bottom:: 0px;
}
ul#navigation li
{
border-bottom: 1px solid #ccc;
}
nicht etwas einfacher, oder is das dann nicht mehr ok?
Pberndt
Wie du die Liste designest, ist letztlich ziemlich egal :) Hier gehts vorallem um die :hover Pseudoklasse :)
miraculix
Schön beschrieben und gutes Beispiel!