Ein- und Ausblenden (4): Untermenüpunkte
gedruckt am 04. Feb. 2012
Das Beispiel zeigt, wie Untermenüpunkte eingeblendet werden können, die die Auswahlmenüpunkte enthalten. Der jeweilige Untermenüblock wird über den vorhandenen Text gelegt.
Beispiel
Das entsprechende JavaScript ist in diesem Fall in eine externe js-Datei ausgelagert:
<link rel=”stylesheet” href=”menue.css” type=”text/css”>
<script language=”javascript” src=”menue.js”></script>
Beim Laden einer Seite werden die Untermenüpunkte unsichtbar gemacht.
<body onLoad=”invisible()”>
Das ist der Text in menue.js:function invisible() {
document.getElementById(”submenue1″).style.visibility = “hidden”;
document.getElementById(”submenue2″).style.visibility = “hidden”;
document.getElementById(”submenue3″).style.visibility = “hidden”;
document.getElementById(”submenue4″).style.visibility = “hidden”;
document.getElementById(”submenue5″).style.visibility = “hidden”;
}
function menue(i) {
invisible();
document.getElementById(”submenue”+i).style.visibility = “visible”;
}
Achtung: Obige submenues müssen mit einer id im HTML-Text vergeben sein. Die function invisible() könnte auch verallgemeinert werden mit einer for-Schleife um Redundanzen zu vermeiden:function invisible() {
for (var j=1;j<=5;j++) {
// Die Identities werden variable erzeugt:
document.getElementById(”submenue”+j).style.visibility = “hidden”;
}
}
function menue(i) {
invisible();
document.getElementById(”submenue”+i).style.visibility = “visible”;
}
function menue(i) macht zuerst alle Menüpunkte unsichtbar, dann wird zum gewählten Menüpunkt (i) das entsprechende Untermenü angezeigt. Der Einfachheit halber werden im folgenden Code nur jeweils Menü 4 und Menü 5 sowie Untermenü 4 gezeigt.
<div><a href=”#” onMouseOver=”menue(4)” onMouseOut=”invisible()”> Aktie</a></div>
<div class=”menue”><a href=”#” onMouseOver=”menue(5)” onMouseOut=”invisible()”> Produktion</a></div>
<div id=”submenue4″ onMouseOver=”menue(4)” onMouseOut=”invisible()”>
<!–Untermenü 4 –>
<div><a href=”" onClick=”invisible()”>Allgemein</a></div>
<div><a href=”" onClick=”invisible()”>Details</a></div>
<div><a href=”" onClick=”invisible()”>Aktienkurs</a></div>
<div><a href=”" onClick=”invisible()”>…</a></div>
<div><a href=”" onClick=”invisible()”>…</a></div>
<!– Ende der Sub-schleife –>
</div>
Die Style-Klassen menue, submenue1-5 und submenuezeile müssen im Stylesheet definiert werden.
menue bezieht sich auf die Menüpunkte, die (hier) in einer Zeile gemeinsam definiert werden (Schriftfarbe, Breite, hover, etc).
submenue1-5 gibt jeweils die Lage an sowie Farben (Hintergrund, Schrift):{
position: absolute;
left: …px;
top: …px;
}
submenuezeile gibt die Formatierung der gesetzten Hyperlinks an. Mit display:block; wird die ganze Zeile bis zum Rand als Link behandelt (Firefox).
