Die Technik, in eine vertikale CSS-Navigation eine Infobox (Tooltip, Teaser) einzubauen, erlaubt Ihnen auf einfache Art und Weise, nähere Informationen zu den jeweiligen Menüpunkten anzuzeigen.

Fertiges Beispiel ansehen [Menü anklicken!]

Aufbau des Beispieles:

Ich starte im Quellcode mit einer einfachen ungeordneten Liste. In die Listen-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.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<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>
</ul>

Das Stylesheet (CSS) für die vertikale Navigation sieht wie folgt aus:

Zuerst werden die Listenelemente für die vertikale Navigation formatiert

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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:

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.

1
2
3
4
5
6
7
8
9
10

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;
}

Endergebnis: Vertikale Navigation mit Tooltip/Teaser:

Abschließende Bemerkung:

Sie können die oben beschriebene Technik nicht nur in einer vertikalen Navigation, sondern nach entsprechender Modifikation auch in allen anderen Elementen Ihrer Webseite einsetzen (z.B.: Links im Fließtext, Überschriften, Profile etc.).
Zusätzlich zum Original habe ich auch eine Variante in grüner Farbe erstellt.

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

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

Den Originalartikel zu diesem Blogbeitrag finden Sie hier:

Link: www.sohtanaka.com

Ähnliche Artikel:

CSS Tooltips erstellen – Infoboxen über HTML-Elementen
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier
Multiple Remote Linking: Anleitung und 2 Beispiele
Webseiten-Überschriften mit CSS als elegante Hingucker

Erklärung des Begriffes Tooltip:

Ein Tooltip (auch »Quickinfo«, »Kurzinfo«; sinngemäß übersetzt: Hilfe zu einem Werkzeug) ist ein kleines Fenster, das dem Benutzer weitere Informationen zu einem Objekt anzeigt. Es wird in Browsern beispielsweise zur Beschreibung von Links verwendet und erscheint, wenn der Mauszeiger eine gewisse Zeit über dem entsprechenden Objekt verbleibt.

Aufbau der CSS-Tooltips:

Innerhalb eines Hyperlinks wird das HTML-Element <span>…..</span> eingesetzt und mit dem Infotext für den Tooltip aufgefüllt.

<a href=”#”>Linktext<span>Infotext für den CSS-Tooltip</span></a>

Danach erhält das span-Element je nach Beispiel eine eigene CSS-Formatierung. Wenn Sie mit der Maus über den Link fahren, erscheint nach der Fertigstellung Ihr CSS Tooltip.

Tooltips – Grafik

Beispiel 1: Easy CSS Tooltip

HTML:

1

Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

CSS:

/* ======================================
   1. Kalibrierung, allgemeine Styles und
      Formatierung Layout-Bereich
   ====================================== */
 
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#wrapper {width: 600px; margin: 50px auto; padding: 20px;border:1px solid #cccccc;}
 
/* =============================
   2. Styles für den CSS Tooltip
   ============================= */
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}

Original gefunden unter:
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/

Beispiel 2: CSS Tooltip

HTML:

1

In <a href="http://sura1.at/">Roll over here<span>Css Tooltip von Sura1.at</span></a>, mollis vel.....

CSS:

/* Formatierung CSS Tooltip */
   a{ z-index: 10; }
   a:hover { position: relative;
            z-index: 100;
          }
   a span { display:none; }
   a:hover span { display:block;
                 position:absolute;
                 float:left;
                 white-space:nowrap;
                 top:-2.2em;
                 left:.5em;
                 background:#fffcd1;
                 border:1px solid #444;
                 color:#444;
                 padding:1px 5px;
                 z-index:10;
               }

Original gefunden unter:
http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links