Wie Sie in eine vertikale CSS-Navigation eine Infobox (Tooltip) einbauen

6. Juli 2010

sura1

Wie man einen Tooltip in eine vertikale CSS-Navigation einbaut

CSS-Navigation mit Tooltip

Heute möchte ich Ihnen zeigen, wie Sie nur mit ein wenig HTML und CSS eine Infobox (Tooltip, Teaser) in eine vertikale CSS-Navigation einbauen. Diese Technik erlaubt es Ihnen auf einfache Art und Weise, nähere Infos zu den jeweiligen Menüpunkten anzuzeigen.

Beide Beispiele zusammen als *Zip-Datei (7,5KB) downloaden [Grafik anklicken!]

Den Originalartikel zu diesem Blogbeitrag finden Sie hier:
www.sohtanaka.com

Fertiges Beispiel ansehen [Grafik anklicken!]

Aufbau des Beispieles:

1. HTML-Quelltext:

Ich starte im Quellcode mit einer einfachen ungeordneten Liste. In die <li>-Tags werden Hyperlinks eingebaut und innerhalb dieser werden <span>-Tags eingefügt. Im Beispiel-Code sind nur die ersten 3 Punkte der vertikalen Navigation angeführt.

Der Text innerhalb der <span>-Tags kann eine x-beliebige Länge haben. Das entsprechende Textfeld vergrößert sich automatisch und muss nicht extra angepasst werden.

HTML-Quellcode:

<ul class="sidenav">
  <li>
     <a href="#">Home
        <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse.
              Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.</span>
    </a>
  </li>
  <li>
     <a href="#">Blog
        <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse.
              Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.</span>
     </a>
  </li>
  <li>
     <a href="#">Tutorials
        <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse.
              Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.</span>
     </a>
  </li>

2. CSS-Formatierung:

Das CSS-Stylesheet für die vertikale Navigation wird wie folgt aufgebaut:

Punkt 1:

Zuerst werden die Listenelemente für die vertikale Navigation formatiert

ul.sidenav {
        font-size: 1.2em;
        float: left;
        width: 200px;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #005094;
        border-bottom: 1px solid #3373a9;
        border-top: 1px solid #003867;
}
ul.sidenav li a{
        display: block;
        color: #fff;
        text-decoration: none;
        width: 155px;
        padding: 10px 10px 10px 35px;
        background: url(sidenav_a.gif) no-repeat 5px 7px;
        border-top: 1px solid #3373a9;
        border-bottom: 1px solid #003867;
}

Die vertikale Navigation sieht danach wie folgt aus:

vertikale Navigation in Blau

Punkt 2:

Als nächstes wird der hide/show-Effekt hinzugefügt. Wenn Sie danach mit der Maus über die Hpyerlinks fahren, bewirkt der hover-Effekt das Öffnen der Infobox mit den zusätzlichen Infos.

ul.sidenav li a:hover {
        background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
        border-top: 1px solid #1a4c76;
}
ul.sidenav li span{     display: none; }
ul.sidenav li a:hover span {
        display: block;
        font-size: 0.8em;
        padding: 10px 0;
}

Zusätzlich zum Originalartikel CSS Vertical Navigation with Teaser habe ich auch eine vertikale CSS-Navigation in grüner Farbe erstellt.

Variante 1 (blau) und Variante 2 (grün) ansehen [Grafik anklicken!]

Beide Beispiele zusammen als *Zip-Datei (7,5KB) downloaden [Grafik anklicken!]