CSS Spielereien

CSS Tips und Tricks für Anfänger und Profis

Ein einfaches CSS Menü mit Hover Effekt

Hier zeige ich Ihnen wie man mit CSS sehr schön ein einfaches Menü mit einem Hover Effekt erstellen kann. In einigen wenigen Schritten kommt man so zu einem ansehlichen Menü. Wenn Sie sich die Beispiele anschauen benutzen Sie bitte den Zurück Button ihres Browsers um zu dieser Seite zurück zu kehren.

Schritt 1

Wichtig ist hier das wir von Anfang an validen Quelltext benutzen und uns so später unnötige Arbeit ersparen. Wie sie unten sehen habe ich mein Menü als ungeordnete Liste ausgezeichnet.

  <ul>
    <li><a href="#" title="Seite 1">Seite 1</a></li>
    <li><a href="#" title="Seite 2">Seite 2</a></li>
    <li><a href="#" title="Seite 3">Seite 3</a></li>
    <li><a href="#" title="Seite 4">Seite 4</a></li>
  </ul>

Das ganze was wir bisher haben sieht so aus: Beispiel 1.

Schritt 2

Unserem <ul> geben wir die ID "menu". Mit #menu li können wir die einzelnen Einträge ansprechen. Als erstes entfernen wir jetzt die Punkte vor unseren Menüeinträgen. Danach geben wir unseren Menüeinträgen eine Hintergrundfarbe und ziehen einen schwarzen Rahmen von 1px Breite um jeden Eintrag.

Da der Hintergrund den wir gewählt habe für die Schriftfarbe schwarz zu dunkel ist ändern wir die Schriftfarbe in Weiss. Das können wir machen in dem wir mit #menu li a den Einträgen eine andere Schriftfarbe geben.

#menu li{list-style-type: none;
         background-color: #00FFFF;
         border: solid 1px #000000;}
         
#menu li a {color: #FFFFFF;}

Jetzt sieht unser Menü so aus: Beispiel 2. Das entspricht aber noch nicht im geringsten dem was wir wollen.

Schritt 3

Wir nehmen also weitere Änderungen an unserem Menü vor. Wir geben dem Menü eine bestimmte Weite. Hier verwenden wir em damit bei einer Schriftvergrösserung im Browser das Menü mit vergrössert wird und die Schrift nicht unschön über die Menüpunkte hinausragt. Dann geben wir der Schrift noch etwas Abstand zum Rahmen und zentrieren die Schrift.

#menu li{list-style-type: none;
         background-color: #003399;
         border: solid 1px #000000;
         width: 10em;
         padding: 5px;
         text-align: center;}

#menu li a {color: #FFFFFF;}

Das Menü nimmt langsam Formen an. Wie Sie sehen können kommt das unser Vorstellung von einem Menü schon etwas näher: Beispiel 3.

Schritt 4

Es stört mich das meine Menüeinträge unterstrichen sind, ausserdem möchte ich die Einträge in Fettschrift haben. Da #menu a für das Aussehen der Schrift zuständig ist können wir das dort umändern.

Jetzt wollen wir noch einen Hover Effekt erzeugen. Das können wir in unserem CSS folgendermassen machen: #menu li.hover für den Hintergrund und #menu li a:hover für die Schrift.

#menu li{list-style-type: none;
         background-color: #003399;
         border: solid 1px #000000;
         width: 10em;
         padding: 5px;
         text-align: center;}

#menu li a {color: #FFFFFF;
            text-decoration: none;
            font-weight: bold;}

#menu li:hover {background-color: #0033FF;}

#menu li a:hover {color: #FF0000;}

Mit dem oben stehenden Code haben wir unser Ziel fast erreicht. Das ist der Stand der Dinge: Beispiel 4.

Schritt 5

Sicher haben Sie inzwischen fest gestellt das man den Link nur dann anklicken kann wenn man mit der Maus genau auf die Schrift zeigt. Das wollen wir ändern. Der Link soll anklickbar sein wenn man sich irgendwo auf der entsprechenden Menüfläche befindet. Das erreichen wir dadurch das wir #menu li a ein display: block geben.

Damit die einzelnen Menüflächen nicht so zusammen hängen sorgen wir mit margin noch für etwas Abstand.

#menu li{list-style-type: none;
         background-color: #003399;
         border: solid 1px #000000;
         width: 10em;
         padding: 5px;
         margin: 5px;
         text-align: center;}

#menu li a {color: #FFFFFF;
            text-decoration: none;
            font-weight: bold;
            display: block;}

#menu li:hover {background-color: #0033FF;}

#menu li a:hover {color: #FF0000;}

So sieht das Menü ansprechend aus: Beispiel 5.

Unser Menü in ein horizontales Menü umwandeln

Bisher haben wir immer mit einem vertikalen Navigationsmenü gearbeitet. Was ist aber wenn unser Seitenlayout ein horizontales Menü erfordert.

Ein horizontales Menü zu erstellen ist kein Problem. Wir können unseren bisherigen Code beibehalten und müssen nur ganz wenige Änderungen vornehmen um ein horizontales Menü zu erzeugen.

#menu {text-align: center;}

#menu li{list-style-type: none;
         background-color: #003399;
         border: solid 1px #000000;
         width: 10em;
         padding: 5px;
         margin: 5px;
         text-align: center;
         display: inline-block;}

#menu li a {color: #FFFFFF;
            text-decoration: none;
            font-weight: bold;
            display: block;}

#menu li:hover {background-color: #0033FF;}

#menu li a:hover {color: #FF0000;}

Ich habe bei menu li ein display inline-block eingefügt. dadurch erreiche ich das sich die Block Elemente des Menüs wie Inline Elemente verhalten und nebeneinander stehen und ich ihnen trotzdem wie Block Elementen eine Breite zuweisen kann. Mit #menu text-align: center habe ich dann noch das ganze Menü zentriert. Das dann natürlich nur wenn das Menü auch wirklich zentriert sein soll.

Hier ist ein Beispiel wie das ganze jetzt aussieht: Beispiel 6.