03.12.2013

CSS-Tutorial:
Kombination von before mit hover und background

Kategorie(n): HTML und CSS Tipps, HTML5 und CSS3 Tipps

Hover-Effekte für Links oder Menüleisten mit CSS zu realisieren sind sicherlich nicht sonderlich kompliziert. Doch wenn es etwas mehr sein soll, z.B. ein hover-Effekt für den Hintergrund (background) einer Menüleiste und gleichzeitig für das Menü-Icon, ist es schon nicht mehr ganz so trivial. Nachfolgend möchte ich die notwendigen Schritte in einem kleinen Tutorial kurz erläutern.

Formatierung einer einfachen Menüleiste mit CSS

Zuerst wird eine einfache Menüleiste benötigt:

<ul id="NavBsp">
  <li><a href="#" title="Link zu Nav-Punkt 1">Nav-Punkt 1</a></li>
  <li><a href="#" title="Link zu Nav-Punkt 2">Nav-Punkt 2</a></li>
  <li><a href="#" title="Link zu Nav-Punkt 3">Nav-Punkt 3</a></li>
</ul>

Dazu gehören ein paar grundlegende Menü-Formatierungen per CSS.

#NavBsp {
  list-style: none outside none;
  margin: 0;
  padding:0;
}
#NavBsp li{
  text-align:center;
  margin: 0;
  padding: 0;
  display: block;
  float:left;
  width:33%;
  position:relative;
  cursor: pointer;
  background: #1e5799;
  border-right: solid 0.0625em #666;
}
#NavBsp li a{
  display: block;
  padding: 0.5em 0;
  color: #fff;
  font-weight: bold;
  text-decoration:none;
}

Das Ergebnis sieht wie folgt aus:

Ergänzung eines einfachen Hover-Effektes per CSS

#NavBsp li a:hover, #NavBsp li a:focus, #NavBsp li a:active{
color: #fff;
background: #1b8ce2;
}

Jetzt sieht die Menüleiste schon etwas schöner aus:

Optische Aufwertung durch einen Hintergrundverlauf

Durch die Einbeziehung der jeweiligen Vendor-Prefixe kann sichergestellt werden, dass der Verlaufseffekt nahezu in allen Browsern dargestellt wird. Tools, wie z.B. ein CSS Gradient Generator helfen Ihnen dabei.

#NavBsp li{
  background: -moz-linear-gradient(top, #1e5799 0%, #1b8ce2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#1b8ce2));
  background: -webkit-linear-gradient(top, #1e5799 0%,#1b8ce2 100%);
  background: -o-linear-gradient(top, #1e5799 0%,#1b8ce2 100%);
  background: -ms-linear-gradient(top, #1e5799 0%,#1b8ce2 100%);
  background: linear-gradient(to bottom, #1e5799 0%,#1b8ce2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1b8ce2',GradientType=0 );
}

#NavBsp li a:hover, #NavBsp li a:focus, #NavBsp li a:active{
  background: #1b8ce2;
  background: -moz-linear-gradient(top, #1b8ce2 0%, #57a7e0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b8ce2), color-stop(100%,#57a7e0));
  background: -webkit-linear-gradient(top, #1b8ce2 0%,#57a7e0 100%);
  background: -o-linear-gradient(top, #1b8ce2 0%,#57a7e0 100%);
  background: -ms-linear-gradient(top, #1b8ce2 0%,#57a7e0 100%);
  background: linear-gradient(to bottom, #1b8ce2 0%,#57a7e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b8ce2', endColorstr='#57a7e0',GradientType=0 );
}

Die Menüleiste entspricht nun fast meinem Schönheitsideal:

Einblenden eines Menü-Icons mit Hilfe des Pseudo-Elementes before

Im letzten Schritt wird zu den Menüpunkten noch ein kleines Menü-Icon hinzugefügt. Hierzu wird das Pseudo-Element „before“ verwendet. Mit before kann ein beliebiger Inhalt vor einem Element eingefügt werden. In diesem Tutorial vor dem Link - also vor dem <a href="... innerhalb der Menüleiste.

Welches Element konkret eingefügt wird, wird über die Eigenschaft „content“ definiert. Hier kann z.B. ein Text oder auch eine Bild-URL stehen. Durch diesen Trick lassen sich Hintergrundverlauf und das Bild optisch überlagern. In diesem Tutorial wird einfach nur eine Leerposition eingefügt. Das Bild selbst wird als Hintergrund (background) eingebunden. Das bringt wiederum Vorteile für den hover-Effekt.

#NavBsp li a:before{
  content: " ";
  top: 10px;
  left: 5px;
  width:18px;
  height:18px;
  position: absolute;
  background: url("plus-minus.gif") no-repeat scroll left top transparent;

  background-color: #000;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  -mozborder-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
}

Die zusätzlichen Eigenschaften box-shadow und border-radius wurden nur eingefügt, um die Menüleiste optisch noch etwas aufzuwerten. Sie werden (noch) nicht von allen Browsern unterstützt.

Nun ist die Menüleiste fast komplett:

Kombination von hover und before für den Hintergrund

Für den hover-Effekt kann nun hover mit before kombiniert werden. Da das Bildes als Hindergrund eingebunden wurde, kann es jetzt durch ein CSS-Sprite einfach gewechselt werden. Dadurch gibt es einerseits keine Verzögerungen beim Nachladen und andererseits wird aus Sicht der Performance kein zusätzlicher Request benötigt.

#NavBsp li a:hover:before, #NavBsp li a:focus:before, #NavBsp li a:active:before {
background: url("plus-minus.gif") no-repeat scroll -15px top transparent;
}

Und hier ist die fertige Menüleiste:

Fazit

Das Tutorial zeigte Ihnen, wie durch die Kombination von before, hover und background recht ansprechende Menüleisten erstellt werden können. Analog zu before kann die gleiche Vorgehensweise auch für „after“ angewendet werden. Dann wird das Element logischerweise dahinter eingefügt.
Leider werden die aufgezeigten Techniken meist nur von relativ aktuellen Browser-Versionen unterstützt. In älteren Browsern sehen die Menüleisten etwas einfacher aus. Die Funktionalität ist dadurch aber nicht eingeschränkt.

CSS-Effekte mit hover und before