Einfaches Menü mit CSS

Da sehr viele Leute gefragt haben, wie das Menü von Thors-Page.de gemacht ist, habe ich beschlossen hier ein kleines Tutorial zu einem ähnlichen Menü zu machen.

» So wird es aussehen «

Zuerst brauchen wir das HTML-Grundgerüst des Menüs, welches später über CSS formatiert wird. Wir haben um das Menü einen 1 Pixel starken Rahmen. Als Überschrift werden wir das <h4>-Tag benutzen und die Links werden mit dem <a>-Tag in eine unsortierte Liste eigefügt. Nun aber erst einmal der HTML-Code:

<div id="navcontainer">
<ul>
<li class="ueberschrift">Überschrift</li>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a></li>
</ul>
</div>

Das #-Zeichen muss nurnoch durch den Link ersetzt werden. Also zum Beispiel durch http://www.thors-page.de oder seite.html o.Ä.

Nun kommen wir zum CSS Teil:

body{font-family: Verdana, Arial, Tahoma, sans-serif; font-size: 10pt;}

#navcontainer ul {
border: 1px solid #000000;
border-top: 0px;
list-style-type: none;
margin: 0;
padding: 0;
width: 10.0em;
}
#navcontainer li {
padding:1px 0; margin:-1px 0;
}
#navcontainer h4 {
font-size: 11pt;
margin-bottom: 2px;
font-weight: bold;
background: #0091D7;
color: #FFFFFF;
border-bottom: 1px #000000 solid;
border-top: 1px #000000 solid;
}
#navcontainer a {
display: block;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
color: #000000;
}
#navcontainer a:hover {
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
color: #000000;
background: #CCEEFF;
}

Das sieht komplizierter aus als es ist ;-) Zunächst wird für body die Schrift-Familie und Schriftgröße angegeben, was für das Menü allerdings zweitrangig ist.

Nacheinander werden nun die Tags ul, li, h4 und a, die im div-Container mit der ID navcontainer sind, formatiert. Zuerst wird dem ul-Tag über border: 1px solid #000000; ein 1 Pixel starker Rahmen gegeben. Danach werden über list-style-type: none; die Aufzählungspunkte der Liste entfernt. margin und padding bekommen jeweils die Werte 0, damit das Menü links und oben an den Rand des Browsers "rutscht". Über width wird gleich noch die Breite des Menüs festgelegt. Ich habe die Einheit em gewählt, um hohe Flexibilität zu gewährleisten.

Die nächste wichtige Stelle im CSS-Code bei #navcontainer a. Hier wird über display: block; bestimmt, dass die Linkformatierung für die ganze Zeile und nicht nur für die Länge des Schrift gilt. Dadurch kann man den Hover-Effekt erzeugen, der erscheint, wenn man mit der Maus über einen Link fährt. Alles andere sind eigentlich Feinheiten und können auch leicht verändert werden.

Erweiterung zu einem CSS-Layout

Bewusst habe ich dem Container um die Navigation die ID navcontainer gegeben. Die HTML-Datei lässt somit einfach zu einem ganzen Layout erweitern. Spezieller ausgedrück, zu einem CSS-Layout. Ich möchte hier die Vorgehensweise nur ein wenig anreissen. Ein komplettes Tutorial findest du »hier

Der ID navcontainer wird die Eigenschaft float: left; zugewiesen. Das hat zur Folge, dass alle folgenden Elemente der HTML-Datei um das Menü herumfließen. Nun wird im HTML-Dokument unterhalb des Menüs ein weiter div-Container erstellt, der die ID content bekommt. Mittels CSS kann man diesem über margin-left einen gewissen Abstand zuweisen vom linken Rand. Nun kann Inhalt in diesen Container eingefügt werden und fertig ist das Grundgerüst eines einfachen CSS-Layouts.

Nicht alles verstanden?
→ HTML Crashkurs
→ CSS Einführung

Zurück