Geschrieben von jannis am 01.05.2005, 19:45

Ich habe für meine Homepage mal einen Navigator gebraucht, wo sich per Klick SubMenüs mit Unterpunkten öffnen.
Ja, das ganze geht auch mit PHP hat aber einen großen Nachteil:
Die Seite müsste immer neu geladen werden, da PHP auf dem Server erzeugt wird, JavaScript aber vom Browser interpretiert wird.

Man bindet folgendes Script in den <head>-Bereich ein:

<script language="JavaScript">
// SubCat-Navi (C) 2005 by Jannis Achstetter
// This is THAT simple so write it yourself but
// feel free to use it if you don't get it yourself!
function s(id) { // Function to SHOW
if (document.getElementById(id).style.display == "none") { // Only when hidden
document.getElementById(id).style.display = "inline";
} else { // ELSE Hide
document.getElementById(id).style.display = "none";
}}
function h(id) { // Funtion to HIDE
document.getElementById(id).style.display = "none"; }
</script>

Dann mach man die Menüpunkte so:

<a href="#" onClick="s('sub0');h('sub1');">Menü1</a>
<div id="sub0" style="display:none">
<br>&nbsp;&nbsp;&nbsp;<a href="sub1.1">sub1.1</a>
<br>&nbsp;&nbsp;&nbsp;<a href="sub1.2">sub1.2</a>
<br>&nbsp;&nbsp;&nbsp;<a href="sub1.3">sub1.3</a>
</div>
<br><br>

<a href="#" onClick="h('sub0');s('sub1');">Menü2</a>
<div id="sub1" style="display:none">
<br>&nbsp;&nbsp;&nbsp;<a href="sub2.1">sub2.1</a>
<br>&nbsp;&nbsp;&nbsp;<a href="sub2.2">sub2.2</a>
<br>&nbsp;&nbsp;&nbsp;<a href="sub2.3">sub2.3</a>
</div>
<br><br>

Man sollte halt darauf achten, dass man immer neue subX-IDs vergibt und bei jedem Menüpunkt die andern mit h('subX'); versteckt.

Wie das ganze dann ausschauen tut sieht man hier:
http://jannis.milten.lima-city.de/homepage/

Bewertung Anzahl
6
72,7 %
8 Bewertungen
5
9,1 %
1 Bewertungen
4
9,1 %
1 Bewertungen
1
9,1 %
1 Bewertungen