Menüs mit CSS erstellen

Exzellenter Artikel
5 | 86720 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Menüs mit CSS erstellen" mit Ihrem Wissen!

Moderne Menüs zur Navigation werden längst nicht mehr aus reinem Text, der in div-Layern oder Tabellen geschrieben wird, erstellt. Hierfür nutzt man in der Regeln die Möglichkeiten der Listen.

Anzeige Hier werben

In diesem Tutorial möchte ich Ihnen einige Möglichkeiten zeigen, wie Sie mit Hilfe von CSS und Listen moderne und durchaus hübsche Navigationsmenüs erstellen können. Dafür sollten Sie bereits über grundlegende HTML- und CSS-Kenntnisse verfügen. Weitere Informationen zum Thema Menüs mit CSS und Listen finden Sie ebenfalls auf Webmasterpro.de: Navigation mit Navigationsbox bei jedem Link.

1. Generelle Vorbereitungen

1. Vorbereitungen vom HTML

Zunächst sollten wir uns eine Liste in unserem HTML-Code anlegen. Diese kann ganz einfach als Liste irgendwo im Dokument platziert werden oder auch Inhalt eines div-Layers sein.

 
HTML
1
2
3
4
5
6
7
8
9
<ul>
    <li><a href="start.html">Startseite</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="infos.html">Informationen</a></li>
    <li><a href="galerie.html">Galerie</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
</ul>

Wenn wir uns dieses Beispiel anschauen, haben wir prinzipiell bereits unsere Navigation. Jedoch ist diese noch unformatiert und enthält auch noch die schwarzen Punkte der Liste davor. Im nächsten Schritt wollen wir nun dem Menü in einem ersten Schritt etwas "Form" geben.

2. Vorbereitungen des CSS

Zunächst versehen wir unsere Bulletliste mit einer id, nennen wir diese einfach navigation. Jetzt können wir im Stylesheet immer den Selektor ul#navigation ansprechen, um unsere Navigationsliste zu gestalten. So wirkt sich die Formatierung für die Menüliste nicht auf spätere Listen im Inhalt der Website aus. Des Weiteren setzen wir Außen- und Innenabstand und 0 und entfernen die Punkte vor den Listenpunkten. Wer will, kann natürlich auch diese Listenpunkte in die Navigation einbeziehen, dank CSS können wir diese auch noch entsprechend gestalten. Dazu aber später mehr.

Unser CSS-Code sieht nun so aus:

 
css
1
2
3
4
5
ul#navigation {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

Natürlich könnten wir nun unsere Navigation so lassen, doch wir wollen sie optisch etwas auffrischen. Dazu im nächsten Punkt mehr.

2. Gestaltung mit CSS

Zunächst habe ich das Menü mal etwas überarbeitet und ihm "Design" verpasst. Als erstes ein Beispiel, welches ich dann im nächsten Absatz erklären werde:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
    <style type="text/css">
    <!--
    ul#navigation {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

    ul#navigation li {
        padding: 0px;
        margin: 5px;
        width: 20%;
    }

    ul#navigation li a:link {
        display: block;
        border: 1px solid #000;
        background-color: #00FFCC;
        padding: 10px;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-weight: bold;
    }

    ul#navigation li a:hover {
        display: block;
        border: 1px solid #54993f;
        background-color: #727165;
        color: #fff;
    }
    -->
    </style>
</head>
<body>
    <ul id="navigation">
        <li><a href="start.html">Startseite</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="infos.html">Informationen</a></li>
        <li><a href="galerie.html">Galerie</a></li>
        <li><a href="links.html">Links</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
    </ul>
</body>
</html>

Den HTML-Teil können wir außer Acht lassen im Vergleich zum ersten Beispiel ist hierbei lediglich die id="navigation" bei der Bulletliste hinzugekommen. Interessant wird es aber im CSS-Teil. Hier möchte ich Ihnen die einzelnen Blöcke erklären.

Der erste Block ist bereits im ersten CSS-Beispiel erklärt, dieser kann so unverändert bleiben. Im zweiten Block mit dem Selektor ul#navigation li definiert man die Listenpunkte unserer Navigation. Es ist wichtig den Selektor ul#navigation voranzustellen, damit auch wirklich nur die Listenpunkte in der Navigation formatiert werden. Einen Innenabstand brauchen wir hierbei erstmal nicht, das erledigen wir später bei den Formatierungen der Links. Wichtig ist hier zu einen der Außenabstand, damit die einzelnen Navigationspunkte später nicht aneinander kleben. Über die Breite geben wir eine maximal Breite vor, damit die Navigation sich nicht über die gesamte Seite erstreckt, was sie sonst durch das display:block tun würde. Hierbei können Sie Pixelangaben, Prozentangaben oder auch em-Angaben machen, wie Sie es gerne wollen.

Das finale Aussehen erhält die Navigation durch die Definitionen der Links. auch hier ist es wieder wichtig das wir die Selektoren der Bulletliste und der Listenpunkte dem Selektor der Links voranstellen.

Da wir gerne die Navigation als Blockelement dargestellt haben möchten, weisen wir den Links auch das display:block zu. Wichtig ist noch der Innenabstand zu den einzelnen Rändern, damit diese ggfs. nicht zu nah am Text stehen. Auf die restlichen Angaben zur Formatierung gehe ich jetzt nicht weiter ein, ich setze diese mal aus bekannt voraus. Zu dem a:hover sei noch gesagt, dass es hierbei auch wichtig ist es als display:block zuzuweisen, damit dieses ebenfalls als Block angezeigt wird.

Wichtig: Denken Sie daran die Links in folgender Reihenfolge über die CSS zu definieren, da sonst bei einem Besuch eines Links die Stileinstellungen des :hovers wegfallen: a:link, a:visited, a:hover, a:active.

3. Weitere Gestaltungsmöglichkeiten

1. Hintergründe

Als nächstes möchte ich Ihnen drei Möglichkeiten vorstellen, mit denen Sie auch grafische Hintergründe in die Navigation einbauen können. In unserem Beispiel wollen wir dieses bei dem normalen Link und dem Hover-Effekt machen. Folgendermaßen sieht unsere Grafik nun aus:

Bild zu Menüs mit CSS erstellen
Die Hintergrundgrafiken des Menüs. "News" zeigt den :hover-Effekt.

In der Grafik oben ist nun also unser Ziel mit den Hintergrundgrafiken zu sehen. Um diesen Effekt so hinzubekommen gibt es drei Methoden. Sie können für den normalen Zustand und den markieren Zustand jeweils zwei Grafiken machen und diese über background im Stylesheet einbinden. Dann haben wir aber auch noch zwei weitere Möglichkeiten, die wir anwenden können. Zunächst einmal die Ursprungsgrafik der Hintergründe:

Bild zu Menüs mit CSS erstellen
Eine Grafik für Link und :hover-Link.

Wie die Grafik für den normalen und :hover-Link zeigt, können wir in einer Grafik beide Grafiken unterbringen. Die Einbindung erfolgt analog zu der eines normalen Hintergrundes. Unser Stylesheet sieht nun so aus:

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ul#navigation li {
    width: 250px;
    height: 20px;
}

ul#navigation li a:link {
    background: url("hintergrund.png") no-repeat top;
}

ul#navigation li a:hover {
    background: url("hintergrund.png") no-repeat bottom;
}

Wegen der Übersichtlichkeit habe ich den Rest des Stylesheets entfernt, nehmen Sie einfach das Beispiel von oben und ersetzen Sie background-color durch background und dazugehörigen Inhalt.

Beim Selektor für den normalen Link habe ich für den Hintergrund einfach festgelegt, dass dieser am oberen ausgerichtet werden soll. Durch die Angabe einer Höhe im Selektor für den Listenpunkt haben die Listenpunkte automatisch eine Höhe von 20px, dieselbe Höhe, die unser oberer Bereich in der Grafik hat.

Für den :hover-Effekt soll der Hintergrund am unteren Rand ausgerichtet werden. Es werden nun auch die letzten 20 Pixel der Grafik, in unserem Fall für den :hover-Effekt, angezeigt.

Als dritte Möglichkeit können wir auch die top und bottom Angaben weglassen. Unser Hintergrund im ul#navigation li a:hover-Selektor erhält hinter dem no-repeat den Zusatz 0px -20px. Hiermit bestimmen wir die Position vom Hintergrund dank dem -20px ziehen wir diesen um 20 Pixel nach oben. Der obere Bereich wird im Endergebnis nicht zu sehen sein. Die 0px am Anfang sind lediglich dafür da, damit der Hintergrund nicht in horizontaler Richtung verschoben wird.

2. horizontale Navigation

Mit Hilfe von CSS lassen sich auch sehr einfach horizontale Navigationsleisten erstellen. Hierfür sind nur einige wenige Änderungen im CSS-Code notwendig. In unserem Stylesheet von oben müssen wir lediglich einige Dinge löschen und etwas hinzufügen. Die Grundlagen hierfür werden im Selektor ul#navigation li geschaffen, der nun so aussieht:

 
css
1
2
3
4
5
ul#navigation li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

Durch das display: inline werden die Elemente nun nicht mehr untereinander, sondern nebeneinander dargestellt. Hierfür ist es wichtig das display: block aus den Stylesheets für die Links zu entfernen, da sich sonst nichts ändern wird. Als nächstes noch ein Beispiel, wie die Navigation nun aussieht.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
    <style type="text/css">
    <!--
    ul#navigation {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

    ul#navigation li {
        padding: 0px;
        margin: 0px;
        display: inline;
    }

    ul#navigation li a:link {
        border: 1px solid #000;
        background-color: #CCCCCC;
        padding: 2px 5px 2px 5px;
        font-size: 12px;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        font-weight: bold;
    }

    ul#navigation li a:hover {
        border: 1px solid #000;
        background-color: #333333;
        padding: 2px 5px 2px 5px;
        color: #fff;
    }
    -->
    </style>
</head>
<body>
    <ul id="navigation">
        <li><a href="start.html">Startseite</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="infos.html">Informationen</a></li>
        <li><a href="galerie.html">Galerie</a></li>
        <li><a href="links.html">Links</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
    </ul>
</body>
</html>
Optionale Breiten festlegen

Um eine feste Breite zu erzeugen, können wir optional auch den wert display: inline-block; in ul#navigation li a:link festlegen, dann kann man horizontale Breiten, z.B.: für Bildermenüs variabel (mit Klassen) festlegen. Bei der Umsetzung mit reinen Bildern ist darauf zu achten, dass das Menü trotzdem eine semantische Form (wie oben gezeigt) besitzt und man den Listentext z.B. mit text-indent: -9999px; versteckt.

4. Fazit

Ich hoffe Ihnen hat diese Einführung gefallen und Sie ist verständlich und hat Ihnen einen ersten Einblick, in die Möglichkeiten eine Navigation aus Listen zu erstellen, eröffnet. Probieren Sie ruhig selber aus, wie weit Sie Ihre Navigation noch weitere gestalten können. Dafür können Sie zum Beispiel der komplette Liste einen Hintergrund geben oder mit verschiedenen Hintergründen arbeiten.

Ihrer Kreativität sind also fast keine Grenzen gesetzt. Wahrscheinlich werde ich dieses Tutorial in Zukunft noch weiter ergänzen.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Menüs mit CSS erstellen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Menüs mit CSS erstellen" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
  • David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
  • Seit nunmehr 2 Jahren arbeite ich freiberuflich als Web & Screendesigner in Chemnitz und Umgebung. Meine Leistungen reichen von Arbeiten im Photoshop, Illustrator, In Design, Quark und Dreamweaver (Code). Hauptberuflich arbeite ich als Zivi und gründe Ende 2008 mit einem guten Freund eine Agentur für Print- und Webdesign.
  • Kinderturnen - Sport Spiele für Kinder