Dringende Frage über Aufklappmenü!

[Rocket MC]

Hey Leute, hat jemand von euch zufällig Ahnung wie ich das mit dem Aufklappmenü, wie auf der linken Seite dieser Homepage (eRRdeKa » Discografie), hinbekomme? :/
Ich komm damit überhaupt nicht klar, danke im Vorraus! :)

 

[jesterhead]

Beispiel aus eigener Verwendung:

<script type="text/javascript">
var ntop = [50, 80, 110];

var nlast;
var ulast;

var offen = false;

function onoff(nummer, ups){

var topadd = ups * 30;

if(offen == true && nlast == nummer){
for(var i = 0; i < ntop.length; i++){
document.getElementById("menupunkt" + i).style.top = ntop + "px";
}
for(var j = 0; j < ulast; j++){
document.getElementById("up" + nlast + j).style.visibility = "hidden";
}
offen = false;
} else if(offen == true && nlast != nummer){
for(var k = 0; k < ntop.length; k++){
document.getElementById("menupunkt" + k).style.top = ntop[k] + "px";
}
for(var l = 0; l < ulast; l++){
document.getElementById("up" + nlast + l).style.visibility = "hidden";
}
for(var m = nummer + 1; m < ntop.length; m++){
document.getElementById("menupunkt" + m).style.top = ntop[m] + topadd + "px";
}
for(var n = 0; n < ups; n++){
document.getElementById("up" + nummer + n).style.visibility = "visible";
}
nlast = nummer;
ulast = ups;
offen = true;
} else{
for(var o = nummer + 1; o < ntop.length; o++){
document.getElementById("menupunkt" + o).style.top = ntop[o] + topadd + "px";
}
for(var p = 0; p < ups; p++){
document.getElementById("up" + nummer + p).style.visibility = "visible";
}
nlast = nummer;
ulast = ups;
offen = true;
}

}
</script>

Dann musst du dir natürlich die Menupunkte und Unterpunkte definieren:

<style type="text/css">

#frame {position:relative; margin-left:auto; margin-right:auto; width:900px; height:600px;
background-color:#FFFFFF}
#menupunkt0 {position:absolute; left:50px; top:50px; width:150px; height:30px; border-top:1px solid #000000}
#up00 {position:absolute; left:75px; top:80px; width:95px; height:30px; border-top:1px solid #000000;
visibility:hidden}
#up01 {position:absolute; left:75px; top:110px; width:95px; height:30px; border-top:1px solid #000000;
visibility:hidden}
#menupunkt1 {position:absolute; left:50px; top:80px; width:150px; height:30px; border-top:1px solid #000000}
#up10 {position:absolute; left:75px; top:110px; width:95px; height:30px; border-top:1px solid #000000;
visibility:hidden}
#up11 {position:absolute; left:75px; top:140px; width:95px; height:30px; border-top:1px solid #000000;
visibility:hidden}
#menupunkt2 {position:absolute; left:50px; top:110px; width:150px; height:30px; border-top:1px solid #000000}

a {vertical-align:middle}

</style>

Und die Blöcke ins Dokument einfügen und verlinken (onclick="javascriptnoff();")...
Bei mir sind die Unterpunkte jetzt untereinander, aber das kann man ja leicht nach eigenem Belieben abändern.

EDIT:
Hab ich vergessen: bei meinem Beispiel Nummer des Menupunkts (bei 0 angefangen) und Anzahl der Unterpunkte als Parameter mit der Funktion übergeben!

 

[scbawik]

Sorry, nicht dass ich ein besseres Beispiel zur Hand hätte, finde aber das Menü nicht sonderlich gut gelöst.

Wäre sicher auch möglich das ganze mit CSS-Klassen (also ohne IDs) und ohne absolute Positionierung zu lösen. Die vielen for-Schleifen wären damit wahrscheinlich auch nicht nötig. Auch das Verwenden vom onclick-Attribut und das statische Übergeben der Parameter ist nicht sonderlich professionell.

Das Ganze ist ziemlich unflexibel will ich damit sagen. Wenn ich es richtig verstanden habe, muss man für jeden neuen Menüpunkt das CSS bearbeiten. Das ist ja nicht Sinn und Zweck von CSS.

Aber solange es funktioniert und die Menüstruktur nie geändert wird wird's schon reichen.

PS: Für eine bessere Lesbarkeit solltest du geposteten Code in [CODE ]-Tags packen.

 

[jesterhead]

Stimmt, aber das musst du einem Anfänger nachsehen. ;-) Auf jeden Fall funktioniert es gut und solange die Menüstruktur übersichtlich bleibt ist das individuelle Definieren der Elemente gut zu schaffen.