Vertikale CSS Navigation mit Tooltip – CSS Vertical Navigation with Teaser

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

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

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

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

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

Zum Originalartikel [bitte Grafik anklicken!]

Ä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

CSS-Tricks: CSS Tooltip erstellen

Erstellung von CSS Tooltips

CSS – T o o l t i p :

Ein Tooltip (auch »Quickinfo«, »Kurzinfo«; sinngemäß übersetzt: Hilfe zu einem Werkzeug) ist ein kleines Fenster in einer grafischen Benutzeroberfläche, das dem Benutzer weitere Informationen zu einem Objekt anzeigt.

Es wird zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder Bildchen in Computerprogrammen, verwendet und erscheint, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt.

Tooltips sind somit nichts anderes als kleine Informationsboxen über HTML-Elementen. Sie stellen aber auch ein Steuerelement dar, das ein Popupfenster erstellt, in dem Informationen für ein Element in der Oberfläche angezeigt werden.

Ich möchte Ihnen heute ein weiteres Beispiel zeigen, wie Sie nur mit HTML und ein wenig CSS einen Tooltip erstellen:

Sehen Sie unten einen Screenshot des fertigen Beispieles. Klicken Sie auf diesen oder auf den „Demo-Button“ und Sie gelangen zum fertigen CSS Tooltip.

Beispieldatei herunterladen: hier (!)

Quelltext und CSS-Code:

Quellcode:

<h1>Css Tooltip</h1>
<h2>Fahren Sie mit der Maus über die Links und Sie sehen den CSS-Tooltip:</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vel orci. Nam mollis,
   lacus ut rhoncus dictum, quam nibh tincidunt nisi, ac adipiscing odio mauris ut tellus.

   Ut bibendum mollis mauris. Nam ornare nulla eget mi. Duis vitae mi eu mi ultricies dapibus.
   In <a href="#">Roll over here <span>Css Tooltip von Sura 1 Artworks</span></a>, mollis vel,
   commodo vitae, adipiscing et, orci. Nam urna lorem, condimentum quis, dignissim vel,
   vestibulum a, metus. Morbi porta risus vulputate tellus scelerisque vehicula.
   <a href="#">Roll over here <span>Css Tooltip von Sura 1 Artworks</span></a> non velit
   accumsan pulvinar. Ut massa nisi, porta id, convallis at, elementum a, nisl.
   Phasellus ultricies consequat tellus. Integer quis orci vel neque ultricies tincidunt.</p>
<p>Erstellt nach einer Idee von
   <a href="http://cssglobe.com">CSS Globe<span>Css Tooltip von Sura 1 Artworks</span></a>.</p>

CSS:

/* ======================================
   1. Kalibrierung, allgemeine Styles und
      Formatierung Layout-Bereich
   ====================================== */
   body { margin: 0;
	       padding: 40px 80px;
	       background: #fff;
	       font: 80% Arial, Helvetica, sans-serif;
	       color: #555;
	       line-height: 180%;
           }
   h1 { font-size: 180%;
          font-weight: normal;
          color: #690;
        }
   h2 { color: #690;
          font-size: 120%;
        }
   p { margin: 1em 0;
       width: 500px;
     }
   a { color: #f20;
        text-decoration: none;
      }
   a:hover { color: #999; }

/* ==================================
   2. Styles für das Tooltip-Beispiel
   ================================== */
   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;
	                  }

Ähnliche Beispiele:

CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 1
CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 2
CSS Tooltips erstellen: Ballon-Quickinfos / ballon pop-ups

CSS-Tooltips erstellen: Ballon-Quickinfos/balloon pop-ups

Ballon-Quickinfos / balloon pop-ups

Tooltips werden zum Beispiel in Browsern zur Beschreibung von Links und Screenshots verwendet und erscheinen, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt. Eine QuickInfo kann eine oder mehrere Textzeilen, Bilder, Links oder andere Inhalte enthalten.

Wenn nun ein Benutzer in meinem Beispiel den Mauszeiger über die Screenshots bewegt,  erscheint ein Ballon-Popup mit weiterführenden Informationen. Sie erhalten eine Kurzbeschreibung der Webseite, außerdem gibt es in jeder Ballon-Quickinfo 3 Links und Sie gelangen mit diesen direkt auf die Homepage des jeweiligen Anbieters.

Die Balloon-Pop-ups sind eine Bearbeitung der Arbeiten von Stu Nicholls von CSSplay. Sie finden das Original auf der Webseite www.cssplay.co.uk/menu/balloons

Meine Variante sieht folgendermaßen aus:

Bitte auf die Grafik klicken oder das Beispiel hier(!!) ansehen

Für nähere Informationen und zur Bearbeitung:

alle Beispieldateien (html, css, grafiken): 129KB zip-File

(Download-Button oder Link anklicken!)

Vielleicht werden Sie sich fragen, wofür man solche Ballon-Popups überhaupt brauchen kann. In erster Linie sind diese wohl erstellt worden, um zu zeigen, dass man auch ohne JavaScript ansprechende CSS-Tooltips errichten kann.

Für mein konkretes Beispiel könnte ich mir  vorstellen, die Ballon-Popups in einer LINKLISTE einzubauen.

Ich erspare mir dadurch die monotone Auflistung der Links (Zeilenform); natürlich sollten in diesem Falle vielleicht die Screenshots ein wenig kleiner ausfallen, damit bei einer längeren Linkliste die Webseite nicht zu grafiklastig wird.
Schreiben Sie mir Ihre Meinung dazu; womöglich haben Sie andere interessante Vorschläge, wo man Ballon-Quickinfos sinnvoll einsetzen könnte.

Auf CSSPlay gibt es noch 2 weitere Beispiele, die Sie bei Interesse ansehen sollten:

Klicken Sie auf die Screenshots – Sie gelangen damit direkt zu den Beispielen auf CSSPlay.

CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 2

CSS – T o o l t i p :

Wie in Teil 1 meiner CSS-Tooltips versprochen, folgen hier die Beispiele 4 bis 6:

Download Beispieldateien: hier (!)

Beispiel 4:

Es handelt sich hier um einen Tooltip mit abgerundeten Ecken, welchen ich auf der Webseite http://lixlpixel.org/css_tooltip/ gefunden habe. Dieser funktioniert jedoch im Internet Explorer nicht (!).

Wenn Sie das Beispiel ansehen möchten, klicken Sie bitte auf die Grafik oder sehen Sie sich den Tooltip hier (!!) an

Beispiel 5:

Hier stelle ich ihnen eine weitere einfache Infobox vor, welche ich auf der Webseite von http://www.tutorials.de/forum/css/243611-css-tooltips.html aufgestöbert habe. Ich habe das CSS ein wenig „aufgemotzt“, um das Beispiel optisch aufzuwerten.

Bitte auf die Grafik klicken oder das Beispiel hier(!) ansehen

Beispiel 6:

Dieser CSS-Tooltip wurde von mir erstellt und baut auf den anderen 5 in diesem 2-teiligen Workshop gezeigten Beispielen auf.

Bitte auf die Grafik klicken oder das Beispiel hier(!) ansehen

CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 1

CSS – T o o l t i p :

Ein Tooltip (auch »Quickinfo«, »Kurzinfo«; sinngemäß übersetzt: Hilfe zu einem Werkzeug) ist ein kleines Fenster in einer grafischen Benutzeroberfläche, das dem Benutzer weitere Informationen zu einem Objekt anzeigt.

Es wird zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder Bildchen in Computerprogrammen, verwendet und erscheint, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt.

Tooltips sind somit nichts anderes als kleine Informationsboxen über HTML-Elementen. Sie stellen aber auch ein Steuerelement dar, das ein Popupfenster erstellt, in dem Informationen für ein Element in der Oberfläche angezeigt werden.

Ich habe mich im Web nach Tooltips umgesehen, die nur mit Hilfe von HTML und CSS errichtet werden können.

Download Beispieldateien: hier (!)

Es gibt eine unübersichtliche Fülle, welche mit reinem CSS erstellt wurden – ich habe zur Einleitung 6 einfache Beispiele ausgewählt. Dazu muß gesagt werden, dass ich bei einigen Tooltips das Stylesheet unverändert gelassen habe; bei den anderen wurde z.B. die Hintergrundfarbe geändert, der margin (Außenabstand) bzw. der Innenabstand (padding) angepasst etc.

Beispiel 1:

Auf der Webseite von http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/ habe ich den ersten CSS-Tooltip gefunden. Das Script ist kleiner als 1KB und besteht aus 1 html-Zeile und 3 Zeilen CSS. Deshalb wird es von Herrn Jürgen Koller  „easy-css-tooltip“ genannt – was auch tatsächlich zutrifft.

Klicken Sie auf den Screenshot oder sehen Sie hier: Easy CSS Tooltip – by Kollermedia.at

Beispiel 2:

Basierend auf dem ersten Beispiel habe ich den HTML-Quelltext ein wenig verändert; der Tooltip befindet sich hier mitten im Blindtext, welchen ich in einen Link über meine Blogseite eingebaut habe.

Klicken Sie auf den Screenshot oder sehen sie hier: Variante zu Kollermedia.at

Beispiel 3:

Wenn Sie mit der Maus über den gelben Textbereich fahren, erscheint ein CSS-Infofenster und die Hintergrundfarbe im Text ändert seine Farbe.

Bitte auf die Grafik klicken oder das Beispiel hier(!) ansehen

Teil 2 der Tooltips finden Sie hier (bitte Link anklicken!):

CSS-Tooltips erstellen: Beispiele 4 – 6