Navigation mit Informationsbox bei jedem Link

von Benutzer gelöscht | 0 | 7010 Aufrufe

Anzeige Hier werben

Situation

Man hat unter Umständen einmal das Problem des Platzmangels, wenn man zusätzliche Informationen zu Navigationlinks hinzufügen möchte.
Eine gute Methode dies schön umzusetzen ist CSS, denn es ist nicht immer zwingend notwendig JavaScript zu benutzen.

Aufbau der Navigation

Im heutigen Zeitalter sollte eine Navigation aus einer undefined list bestehen, das sollte ungefähr so aussehen:

 
HTML
1
2
3
4
5
<ul id="navigation">
    <li><a href="index.html">Startseite<span>Auf dieser Seite landen Sie auch, wenn Sie meine Seite mit www.foo.bar aufrufen</span></a></li>
    <li><a href="about.html">Über<span>Hier finden Sie alle mögliche Funktionen über mich</span></a></li>
    <li><a href="impressum.html">Impressum<span>Impressum &amp; Disclaimer</span></a></li>
</ul>

Hier ist natürlich zu beachten, dass in jedem Link ein span ist.
Das wird später die Informationsbox für jeden einzelnen Link, diese kann natürlich auch weggelassen werden.
Sie ist nicht zwingend notwendig.

Der wichtige CSS Code

Teil 1
 
css
1
2
3
ul#navigation li a span {
    display: none;
}

Hier sprechen wir das span Tag an, wenn der Link nur angezeigt wird.
Wir verstecken es, das es ja nur angezeigt werden soll, wenn man über den Link fährt.

Teil 2 (Wichtig!)
 
css
1
ul#navigation li a:hover { background: transparent; }

Ist dieser Teil nicht vorhanden, dann wird die Box nicht im Internet Explorer angezeigt.
Hier kann natürlich auch eine Hintergrundfarbe angegeben werden, jedoch muss die Angabe background vorhanden sein.

Teil 3
 
css
1
2
3
ul#navigation li a:hover span {
    display: block;
}

Hier sprechen wir das span Tag an, wenn die Maus über dem Link ist.
Dabei wird es angezeigt mit display: block.
Das span Tag wird in dem Moment zum Blockelement.

Box verschönern

Das ganze sieht nun natürlich nicht sonderlich späktakulär aus.
Deshalb nun von mir ein kleines Beispiel wie die Box aussehen könnte:

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
ul#navigation li a:hover span {
    display:        block;
    color:          #000;
    position:       absolute;
    margin-left:    125px;
    border:         3px solid #456789;
    background:     #fafafa;
    padding:        10px;
    font:           11px Verdana, Helvetica, sans-serif;
    width:          150px;
}

Es wurde getestet in:

  • Firefox 2.0.0.6
  • Internet Explorer 5.01 / 5.5 / 6 / 7
  • Opera 9.21
Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten