Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Vertikale CSS Navigation mit Tooltip – CSS Vertical Navigation with Teaser

Posted by sura1 - 26. März 2009

silver26
Bookmark and Share

Vertikale CSS Navigation mit Tooltips – CSS Vertical Navigation with Teaser

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 [Grafik anklicken!]

vert_nav_teaser_blue

HTML:

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.

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

CSS:

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

Zwischenergebnis: Vertikale Navigation

vert_nav_blue1

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

Ergebnis: Vertikale Navigation mit Tooltip/Teaser

vert_nav_teaser_blue

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 1 (blau) und Variante 2 (grün) ansehen [Grafik anklicken!]

vertnav_teaser_bluevertnav_teaser_green

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

vertnav_teaser_green1-horz

Zum Originalartikel [bitte Grafik anklicken!]

sohtanka

Ähnliche Artikel:

CSS Tooltips erstellen: Ballon-Quickinfos / ballon pop-ups
CSS-Tricks: CSS Tooltip erstellen
CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 1
CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 2
Super simple css bars – einfache Diagramme mit CSS erstellen
Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken
Formatierung von Überschriften mit CSS
CSS-Übung: Initial gestalten (DropCap)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen

2 Antworten to “Vertikale CSS Navigation mit Tooltip – CSS Vertical Navigation with Teaser”

  1. Super Anleitung. Gibt es die Möglichkeit weitere Seiten z.b. mittels Link in das dropdown einzufügen. Wenn ich folgednen Code verwende

    Home
    Testseite

    funktioniert es ncht

    • sura1 said

      Hallo Markus!

      Selbstverständlich funktioniert es, wenn du in die Drop-Downs einen Link einfügst. Du mußt dabei die HTML-Datei mit einem Editor öffnen und dann unter der Listenformatierung im HTML-Listenelement den entsprechenden Hyperlink (z.B.: <a href="http://suras-weblog.at/ rel="nofollow"> einbauen.

      Der (von dir angepasste) Blindtext stellt dann den Text des Hyperlinks (=Webseite!!) dar! Du kannst auch die Größe des Drop-Down-Menüs ändern, indem du neuen Listenelemente hinzufügst oder entfernst!

      Ich hoffe, ich konnte dir damit helfen!
      lg Franz

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: