Andreas An: ul li Verschachtelung loke-a-like Mac Ordneransicht und "js-cms"

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.

  1. Anmerkung zu ---Javascript---
    Für das Laden der o.g. Struktur hatte ich eval() ins Auge gefasst.

    1. Ich habe die Probleme gelöst. Daher ein akzeptables "JS-CMS" geschaffen.

      navigation.txt:

      Menü  
      	Untermenü  
      		Untermenüpunkt=>http://www.google.de/  
      	Untermenü II  
      	Link=>http://selfhtml.org  
      Menü II  
      	UnterIImenü  
      	UnterIImenüII
      

      o.g wird in einen <iframe src="navigation.txt" style="display: none" onload="getlist(this.contentWindow.document.body.innerText);" /> geladen.

      Dazu:

      var nav=new Array();  
      function getlist(source) {  
      	var lines=source.split("\n");  
      	var levels=new Array();  
      	for(var l=0; l<lines.length; l++) {  
      		var tabc=lines[l].split("\t");  
      		while(levels.length>tabc.length-1)  
      			levels.pop();  
      		levels[tabc.length-1]=lines[l].slice(tabc.length-1, lines[l].lastIndexOf("=>"));  
      		eval("nav[\""+levels.join("\"][\"")+"\"]="+(lines[l].lastIndexOf("=>")<0?"new Array()":"\""+lines[l].slice(lines[l].lastIndexOf("=>")+2, lines[l].length-1)+"\"")+";"); }}
      

      Dazu kann via <body onload="document.getElementById('navigation').innerHTML=dolist(nav);">

      mit

      function dolist(list) {  
      	var b="<ul>";  
      	for(key in list) {  
      		b+="<li"+(list[key].toString().lastIndexOf("://")>=0?"":" onclick=\"selectmenu(this)\"")+">"+(list[key].toString().lastIndexOf("://")>=0?"<a href=\""+list[key]+"\">"+key+"</a>":key)+dolist(list[key])+"</li>"; }  
      	if(b!="<ul>") return b+"</ul>";  
      	else return ""; }
      

      die erstellte Liste in den o.g. <div id="navigation"></div> geschrieben werden.

      In meinem Mac-Style-Fall sieht der <div id="navigation"></div> jedoch so aus: <div id="navigation"><div class="content"></div></div>

      und ich lade die Liste so: <body onload="document.getElementById('navigation').childNodes[0].innerHTML=dolist(nav);">

      Die bei Klick auf einen Link ausgeführte Funktion selectmenu ist so definiert:

      function selectmenu(li) {  
      	var obj=li;  
      	while(obj.className!="folder") {  
      		obj=obj.parentNode; }  
      	while(obj.nextSibling) {  
      		obj.nextSibling.removeNode(true); }  
      	obj.parentNode.innerHTML+="<div class=\"folder\">"+(li.getElementsByTagName("ul").length>0?li.getElementsByTagName("ul")[0].outerHTML:"<ul><li>kein Inhalt</li></ul>")+"</div>";  
      	document.getElementById("navigation").scrollLeft=1000000; }
      

      Dazu noch ein wenig css:

      #navigation { width: 100%; height: 380px; overflow-x: scroll; white-space: nowrap; }  
      #navigation .folder { width: 250px; height: 364px; overflow-y: auto; border-left: 1px dotted #aaa; display: inline; }  
      #navigation .folder ul { margin: 0px; padding: 0px; }  
      #navigation .folder ul li { list-style: none; margin: 0px; padding: 5px; border-bottom: 1px dotted #008; }  
      #navigation .folder ul li ul { display: none; }
      

      In diesem Fall aufgrund einer Intranet-Lösung nur für den IE gemacht *schäm*. Jeder DAU kann die navigation.txt bearbeiten. Die Struktur ist simpel und einfach zu benutzen.

      Ich hoffe solche Lösungen stoßen auf Interesse. Für Kritik bin ich empfänglich. Optimierungsansätze sind ebenso willkommen.