nicht angemeldet
Ich erstelle zur Zeit eine Seite, die eine Umfangreiche Menüstruktur enthält. Ich möchte nicht zu jederzeit alle Untermenüs sichtbar machen, sondern nur, wenn dieses ausgewählt wurde. Soweit zum mit meinem Fähigkeiten machbaren.
Die Untermenüs sollen in einer neuen "Spalte" neben dem Elternmenü erscheinen. Dieses Design kennen einige vielleicht von Macs OSX (
).
Habt ihr eine Idee, wie ich diese Variante per css umsetzen kann?
Die Menüs könnten unendlich tief sein. Dann wird ein horizontaler Scrollbalken erscheinen.
---JAVASCRIPT---
Nebenbei: Ich doktore schon länger damit rum. Die o.g. Struktur soll zusätzlich aus einer extra Datei geladen werden. Aufgrund beschränkter Möglichkeiten im beschränkten Intranet steht mir dazu lediglich Javascript zur Verfügung. Weitere Vorgabe: jeder DAU sollte diese Struktur bearbeiten können.
Meine Idee:
-M1
\t-M11
\t-M12
\t\t-M121=>test.html
\t\t-M122
\t-M13
-M2
-M3
Solch eine Struktur versteht jeder. Ich habe dazu versucht in einem <div style="display: none;"></div> die Daten abzulegen und danach im script zu laden, doch es will mir immer wieder nicht gelingen die Daten in ein mehrdimensionales Array zu schreiben. Daher habe ich die Daten im folgenden Format hinterlegt (vgl. "Meine Idee"):
n["M1"]=new Array();
n["M1"]["M11"]=new Array();
n["M1"]["M12"]=new Array();
n["M1"]["M12"]["M121"]="test.html";
n["M1"]["M12"]["M122"]=new Array();
n["M1"]["M13"]=new Array();
n["M2"]=new Array();
n["M3"]=new Array();
Die Daten werden via <body onload="document.getElementById('navigation').innerHTML=dolist(n);"> mit der Funktion
function dolist(list) {
var b="<ul>";
for(key in list) {
b+="<li>"+(list[key]!=""?"<a href=\""+list[key]+"\" onclick=\"nav('off')\" target=\"view\">"+key+"</a>":key)+dolist(list[key])+"</li>"; }
if(b!="<ul>") return b+"</ul>";
else return ""; }
in navigation geschrieben.