Ein- und Ausblenden (2): Untermenü einschieben
gedruckt am 08. Feb. 2012
In einer vertikalen Menüführung sollen bei Klick auf einem Menüpunkt Untermenüpunkte eingeschoben werden.
<div>
<a href=”#” onClick=”aufklappen(1)”>Menüpunkt 1</a>
</div>
<span id=”untermenue1″>
<div>Punkt 1.1</div>
<div>Punkt 1.2</div>
<div>Punkt 1.3</div>
</span>
<div>
<a href=”#” onClick=”aufklappen(2)”>Menüpunkt 2</a>
</div>
<span id=”untermenue2″>
<div>Punkt 2.1</div>
<div>Punkt 2.2</div>
</span>
Die Gestaltung der Menü-Ebenen geschieht über die div-Klassen ebene1 und ebene2. Die Eigenschaften hiefür werden im Stylesheet gesetzt.
Die Hyperlinks auf die erste Menü-Ebene lösen mit onClick die function aufklappen(i) auf, i ist der Index für den Menüpunkt und für die Identity des Untermenü-Bereichs: untermenue1, untermenue2, etc.
Im Script-Bereich wird die function aufklappen(i) definiert:
<script language=”javascript”>
function aufklappen(i) {
for (var j=1;j<=3;j++) {
document.getElementById(”untermenue”+j).style.display = “none”;
}
document.getElementById(”untermenue”+i).style.display = “block”;
}
</script>
In der for-Schleife werden zuerst alle Untermenüpunkte ausgeblendet, dann wird der ausgewählte Untermenü-Bereich eingeblendet. Achtung: Die Variable in der for-Schleife darf nicht i heißen, das sonst der in der Funktion übergebene Wert überschrieben wird.
