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
Tags: CSS, CSS Vertical Navigation, CSS-Navigation, Hover-Effekt, HTML, Hyperlinks, Infobox, li-tag, Links, Listenelemente, Quellcode, span-tag, Teaser, Tooltipps, ungeordnete Liste, vertikale Navigation
