Inspiration und Best Practice: Listenpunkte als Navigationselemente

30.08.2013, 15:26 von Daniel || 0 Kommentare || Mit anderen teilen

Sie werden häufig bei Slidern eingesetzt: kleine Bullet Lists zur Anzeige der Anzahl der Sliderelemente. Doch auch bei anderen Navigationsarten lassen sich die optischen Hinweise prima einsetzen.

Durch die mittlerweile breite Unterstützung von CSS3-Techniken seitens der Browser, sind grafisch aufwendigere Lösungen ohne den Einsatz von Grafiken möglich. Dabei lassen sich border-radius oder CSS3 Gradients nach Belieben einsetzen.

Das Markup

<ul class="bulletList" role="navigation">
  <li class="bullet active">Nav 1</li>
  <li class="bullet">Nav 2</li>
  <li class="bullet">Nav 3</li>
</ul>

Grafiken ade: Das CSS

Der Liste selbst werden ein paar Reset-Angaben mitgegeben. Die Listenpunkte werden zentriert:

ul.bulletList {
  list-style:none; /* Reset */
  margin:0;  /* Reset */
  padding:0;  /* Reset */
  text-align:center;
}

Jeder Listenpunkt bekommt einen (in diesem Beispiel: grünen) Verlauf und wird durch border-radius zu einem Kreis geformt. Für ältere Browser, die mit linear-gradient nichts anfangen können, gibt es einen Fallback in Form einer einfachen Hintergrundfarbe:

ul.bulletList li {
  position:relative;
  display:inline-block;
  width:14px;
  height:14px;
  margin-left:10px;
  text-indent:-9999px; /* Text wird ausgeblendet */
  cursor:pointer;
  background:#60ad2c; /* Fallback für ältere Browser */
  background-image:-webkit-linear-gradient(top, #59a129, #60ad2c); /* Verlauf für Safari und Android-Browser */
  background-image:linear-gradient(#59a129 0, #60ad2c 100%); /* Verlauf */
  border:1px solid #59a129;
  border-radius:12px;
}

ul.bulletList li:first-child {
  margin:0;
}

Der aktive Listenpunkt wird durch einen weißen Farbverlauf hervorgehoben:

/* aktiver Listenpunkt */
ul.bulletList li.active,
ul.bulletList li:focus {
  background:#dbe8d3;
  background-image:-webkit-linear-gradient(top, #fff, #dbe8d3);
  background-image:linear-gradient(#fff 0, #dbe8d3 100%);
  border-color:#fff;
}

Als nächstes wird noch ein Hover-Status definiert, der dem Nutzer ein visuelles Feedback gibt. Als Vorbild dafür wird der aktive Listenpunkt genommen, aber als kleinerer Kreis innerhalb des Größeren dargestellt:

ul.bulletList li:hover:before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  background:#dbe8d3;
  background-image:-webkit-linear-gradient(top, #fff, #dbe8d3);
  background-image:linear-gradient(#fff 0, #dbe8d3 100%);
  border-radius:5px;
}

Die Angaben für top, left, width, height und margin dienen der Zentrierung des kleinen Kreises. background sowie border-radius der Darstellung, wie weiter oben bereits geschrieben.

Ein alter Bekannter tanzt aus der Reihe

Leider gibt es auch bei diesem simplen Beispiel einen Browser, der nicht mitspielen will. Es ist - Surprise, Surprise - der Internet Explorer. Erstaunlicherweise aber kein altes Fossil wie der IE8, sondern die neueste Version, der IE10.

Durch einen Bug kann der IE10 die Pseudoklasse :hover nicht auf ein Pseudoelement wie :before anwenden, ohne dass die Pseudoklasse zuvor auf das Element selbst angewendet wurde. Das sieht dann wie folgt aus:

/* IE10-Bugfix */
ul.bulletList li:hover { }
/* IE10-Bugfix */

Das interessante dabei ist, dass diese Regel leer sein kann. Die blosse Existenz reicht aus, um den Bug zu beheben. Alle anderen IE-Versionen brauchen den Selektor nicht.

Browserunterstützung

Chrome Firefox Internet Explorer Opera Safari
ja, komplett
ja, komplett
seit 8 *, **
ja
ja ***

* ... für IE 8 und 9 ohne Unterstützung für CSS3-Gradients
** ... der IE 8 versteht kein border-radius
*** ... mit -webkit-Präfix für CSS3-Gradients

Schlüsselwörter zu diesem Beitrag

« zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Kommentare



Nutze Deinen Gravatar.


Bitte rechnen Sie 3 plus 1.