Navigation überspringen: Zu den neuesten Einträgen oder zu den aktuellen Artikeln .

Menu mit PopUp-Informationen

Cornelia Lange am 15.11.2002 – 557 Kommentare

Menu mit wechselnden Hintergrundfarben für die Buttons und zusätzlichen PopUp-Informationen ohne Einsatz von JavaScript.

Dieses Menu kommt ohne JavaScript aus. Die MouseOver-Effekte werden allein durch die css-Pseudoklasse a:hover realisiert. Im css (menu1.css) wird die Position und das Layout des PopUps (hier die Klasse .showcase) festgelegt. Die Texte (auch Bilder und sogar List-Styles sind möglich) für das PopUp liegen im <span>-Element innerhalb des jeweiligen Ankers. Im zip-file sind eine Beispieldatei (menu1.html) und das css (basic.css und menu1.css) enthalten. Die Datei kann auch online angesehen werden:

Beispiel ansehen

Das funktioniert in Browsern › Version 5.0, allerdings nicht im Opera 6.

Achtung: Im Windows IE 5.5 und IE 6 gibt es einen Browser-Bug:

Wenn für a:hover nur die Farbe oder nur text-decoration:none angegeben wird, funktioniert das PopUp nicht! Wird mit der Farbe auch der Hintergrund definiert - und das sollte zur Vermeidung von Warnungen im CSS-Validator Standard sein - gibt es keine Probleme und auch ein einfaches border:none; reicht aus, um den Bug zu umgehen.

Peter-Paul Koch, der in seinem Beispiel eine andere interessante Variante des PopUps zeigt, hat getestet, dass folgende Deklarationen geeignet sind, den Bug zu vermeiden: border, display, position, overflow und background.

Noch eine Ergänzung dazu: Im a:hover muss mit den o.g. Möglichkeiten mindestens eine Variante zu a formuliert werden, sonst greift wiederum der Windows IE5.5/6-Bug!

Der Code:

CSS (menu1.css):


#menu {
float: left;
width: 200px;
}
#navi {
float: left;
width: 240px;
margin-top: 150px;
}
#navia {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
border: 1px solid #fff;
width: 150px;
margin: 3px 0;
color: #fc0;
background: #257;
text-align: center;
}
#navi a:link {
color:#fc0;
background: #257;
}
#navi a:visited {
color:#fff;
background: #257;
}
#navi a:hover {
color:#000;
border:1px solid #257;
background: #fff;
}
#navi a:active {
color: #fc0;
background: #fff;
}
#navi a .showcase {
display: none;
}
#navi a:hover .showcase {
position: absolute;
top: 50px;
left: 10px;
display: block;
width: 150px;
font: bold 0.92em Verdana, Arial, Helvetica, sans-serif;
background: #fff;
border: 1px dashed #257;
color: #000;
padding: 5px;
}

HTML (Ebene für das Menu):


<div id="menu"> 
<div id="navi">
<a href="#">Link 1<span class="showcase">Informationen<br /> Link Eins</span></a>
<a href="#">Link 2<span class="showcase">Informationen<br /> Link Zwei</span></a>
<a href="#">Link 3<span class="showcase">Informationen<br /> Link Drei</span></a>
<a href="#">Link 4<span class="showcase">Informationen<br /> Link Vier</span></a>
<a href="#">Link 5<span class="showcase">Informationen<br /> Link Fünf</span></a>
<a href="#">Link 6<span class="showcase">Informationen<br /> Link Sechs</span></a>
<!--navi--></div>
<!--menu--></div>

Kommentar hinzufügen

Bitte füllen Sie alle Felder mit einem * aus. Ihre E-Mail-Adresse wird nicht veröffentlicht. HTML ist nicht erlaubt, dafür Markdown.






Zur Spamvermeidung nutzt das Formular ein sogenanntes Captcha.
Bitte tragen Sie das Ergebnis der Rechenaufgabe in das nachfolgende Feld ein.
(Beispiele: max(3,5) = 5; min(2,8) = 2; 3 + 5 = 8)