Wie man einen Tooltip in eine vertikale CSS-Navigation einbaut
Image may be NSFW.
Clik here to view.
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!]
Image may be NSFW.
Clik here to view.Den Originalartikel zu diesem Blogbeitrag finden Sie hier:
www.sohtanaka.com
Fertiges Beispiel ansehen [Grafik anklicken!]
Image may be NSFW.
Clik here to view.
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:
Image may be NSFW.
Clik here to view.
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!]
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Beide Beispiele zusammen als *Zip-Datei (7,5KB) downloaden [Grafik anklicken!]