Menüs mit CSS erstellen

Exzellenter Artikel
5 | 8 Kommentare | 80417 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

Kommentare: Menüs mit CSS erstellen

Neuen Kommentar schreiben
unterschiedliche Farben
Beantworten

Wie kann ich es hin bekommen das bei einer Navi-Liste (ul) bei jedem Link als Hoover ein anderer Farbton erscheint??

Danke vorab

Benutzer gelöscht am 30.03.2009 um 23:38
Seriös oder was ?
Beantworten

Warum steht denn da "Ihnen" im Fazit - sind wir schon alt oder wie?

Jochen Bauer am 03.10.2008 um 21:56
Re: Seriös oder was ?
Beantworten

Ich habe da generell die formelle Anreden benutzt ;) Wie soll das denn allgemein auf WMP geregelt werden?

Markus Stahmann am 06.10.2008 um 16:01
Problem bei dieser Art der Umsetzung
Beantworten

Das Problem bei dieser Art der Umsetzung ( eine Hintergrundgrafik für zwei Aktivitätszustände eines Navigationspunktes ) ist die geringe Flexibilität in Sachen Inhalte. Wenn ein Menüpunkt bspw. sehr viel Text beinhaltet und dieser umbricht, kommt in diesem Fall der grüne Bereich der Hintergrundgrafik zum Vorschein, obwohl der Menüpunkt gar nicht aktiviert ist. Daher sollte man für solche Fälle einer solchen Grafik für den aktiven und inaktiven Zustand immer noch etwas "Spielraum für eine zweite Zeile" geben. Gerade bei Seiten deren Inhalte stetigen Veränderungen unterliegen oder Mehrsprachigkeit unterstützen, müssen diesbezüglich etwas "flexibler" sein.

WebstandardTeam am 24.09.2008 um 13:04
Re: Problem bei dieser Art der Umsetzung
Beantworten

Schon, aber am Ende steht ja auch, man soll auspobieren.

Das ist ja so ein "Fehler" den man schnell sieht und dann einfach mal selber überlegt, was man dagegen machen kann.

Trotzdem, wenn Zeit ist würde ich das noch eben ins das Tutorial schreiben. (Wenn es schon drin steht sry. haeb das nur überflogen)

André F. am 28.12.2008 um 19:40
Tolle Artikel
Beantworten

Wirklich super Artikel. Da versteht sogar ein alter Designer wie ich, wie man sowas relativ simpel erstellen kann. Ich schau, dass der Artikel auch noch irgendwo im HTML/CSS Bereich besonders verlinkt wird.

Fabian Ziegler am 12.03.2008 um 17:00
Re: Tolle Artikel
Beantworten

Danke für das Lob. Wenn ich mit dem Abi durch bin schreibe ich wohl noch mehr Sachen.


Markus

Markus Stahmann am 12.03.2008 um 21:13
Re: Tolle Artikel
Beantworten

Dann mal viel Glück für die Prüfungen! Wir sind gespannt was dann noch kommt.

Fabian Ziegler am 13.03.2008 um 09:39