zur Website von Cornelia Lange

Menu mit PopUp-Informationen

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 per CSS-Deklaration mithilfe a:hover realisiert. Im CSS (im Zip die Datei: 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 in einem <span>-Element innerhalb des jeweiligen Ankers. Unten ist der relevante Code für das CSS und das HTML angeführt.

Das funktioniert in Browsern › Version 5, allerdings nicht im Opera 6. Opera 7 beta setzt die PopUps beim MouseOut nicht zurück. Nach Berichten einiger Listenmitglieder ist dieser Bug bereits gemeldet und wird hoffentlich in der endgültigen Version berichtigt..

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äzung 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!

Valid XHTML 1.0!     Valid CSS!

Das relevante CSS für das PopUp:

#menu {
float: left;
width: 200px;
}
#navi {
float: left;
width: 240px;
margin-top: 150px;
}
#navi a {
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;
}

Der zugehörige HTML-Code:

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