Klappmenu per Javascript
heute erstellen wir ein klappmenu mit javascirpt
Schritt 1:
was wollen wir? ein menu mit unterkategorien.
zuerst beginnen wir mit der Struktur:
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<a href="#">navi_1</a>
<div id="subnavi_1" style="display: none;">
<br>
sub_navi<br>
sub_navi<br>
sub_navi<br>
sub_navi
</div>
<br>
<a href="#">navi_2</a>
<div id="subnavi_2" style="display: none;">
<br>
sub_navi<br>
sub_navi<br>
sub_navi<br>
sub_navi<br>
</div>
</body>
</html>
das ist jetzt mal die html-datei min der navigation und den unterkategorien.
das CODE:
style="display: none;"
gibt an, dass das ganze div unsichtbar ist.
Schritt 2:
jetzt müssen wir per javascript beim click auf den button den style des div-tags ändern, damit er sichtbar wird.
das würde so funktionieren: CODE:
document.getElementById('_hier_elementname_').style.display == 'inline'
der elementname ist die id des div-tags also in diesem fall für die erste navi "subnavi_1" und für die zweite "subnavi_2".
Schritt 3:
soo, jetzt sollte man das ganze aber auch wieder zuklappen können, wenn es geöffnet ist. das machen wir mit einer simplen if-abfrage:CODE:
if (document.getElementById('subnavi_1').style.display == 'inline') {
document.getElementById('subnavi_1').style.display = 'none';
} else {
document.getElementById('subnavi_1').style.display = 'inline';
}
Schritt 4:
der schlussendliche code sieht dann so aus: CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<a href="#" onClick="if (document.getElementById('subnavi_1').style.display == 'inline') {
document.getElementById('subnavi_1').style.display = 'none';
} else {
document.getElementById('subnavi_1').style.display = 'inline';
}">navi_1</a>
<div id="subnavi_1" style="display: none;">
<br>
sub_navi<br>
sub_navi<br>
sub_navi<br>
sub_navi
</div>
<br>
<a href="#" onClick="if (document.getElementById('subnavi_2').style.display == 'inline') {
document.getElementById('subnavi_2').style.display = 'none';
} else {
document.getElementById('subnavi_2').style.display = 'inline';
}">navi_2</a>
<div id="subnavi_2" style="display: none;">
<br>
sub_navi<br>
sub_navi<br>
sub_navi<br>
sub_navi<br>
</div>
</body>
</html>
