Hello people. I somehow got fedup with the navigation-structure of the Online Manual so I wrote a small javascript-Tool which rebuilds the navigation structure dynamically and provides a foldable navigation.

I tested it successfully with Firefox 3.6, 3.0.15, 2.0.0.20 and Internet Explorer 8 which works flawlessly.

Follow this link for the guide

Now you should be able to unfold and fold the menus by clicking on the book-images in front of the links.

Here is the code again in readable form.
Code:
function AttachEvent(obj,evt,fnc,useCapture){
	if (!useCapture) useCapture=false;
	if (obj.addEventListener){
		obj.addEventListener(evt,fnc,useCapture);
		return true;
	} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
	else{
		MyAttachEvent(obj,evt,fnc);
		obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
	}
} 


function CreateTree(TreeData, Level) {
 var Counter = 0;
 var SearchString = '\\n';
 for(Counter = 0; Counter < Level; Counter++) {
  SearchString += '\\s\\s\\s';
 }
 SearchString += '\\<';
 var RegularExp = new RegExp(SearchString, '');
 var NewTree = TreeData.split(RegularExp);
 var Length = NewTree.length;
 
 var SearchString = '\\n';
 for(Counter = 0; Counter < Level+1; Counter++) {
  SearchString += '\\s\\s\\s';
 }
 SearchString += '\\<';
 RegularExp = new RegExp(SearchString, '');
 
 for (Counter = 0; Counter < Length; Counter++) {
  if(typeof(NewTree) == 'object') {
   if(NewTree[Counter].charAt(0) != '<') {
    NewTree[Counter] = '<'+NewTree[Counter];
   }
   if(NewTree[Counter].match(RegularExp)) {
    NewTree[Counter] = CreateTree(NewTree[Counter], Level + 1);
   }
  } else {
   if(NewTree.charAt(0) != '<') {
    NewTree = '<'+NewTree;
   }
  }
 }
 return NewTree;
}

function genTreeHTML(Tree, Level) {
 var Output = '<ul style=\'display:none\' class=\'Cat'+Level+'\' id=\'Cat'+Level+'\'>';
 var Element;
 var Counter = 0;
 for(Counter = 0; Counter <  Tree.length; Counter++) {
  if(typeof(Tree[Counter]) != 'object') {
   Output += '<li class=\'Ebene'+Level+'\' id=\'Menu'+Level+'.'+Counter+'\'>'+Tree[Counter]+'</li>';
  } else {
   Output += '<li class=\'Ebene'+Level+'\' id=\'Menu'+Level+'.'+Counter+'\'>'+Tree[Counter][0];
   Tree[Counter].splice(0,1);
   Output += genTreeHTML(Tree[Counter], Level+'.'+Counter)+'</li>';
  }
 }
 Output += '</ul>';
 return Output;
}

function HandleMouse(evt) {
	var pointer;
	if(evt.target) { var MyTarget = evt.target;}
	else { var MyTarget = evt.srcElement;}
	if(MyTarget.tagName == 'IMG') {
		var MenuTarget = MyTarget.parentNode.lastChild;
		if(MenuTarget.tagName == 'UL') {
			if(MenuTarget.style.display == 'none') {
				MenuTarget.style.display = 'inline';
			} else {
				MenuTarget.style.display = 'none';
			}
		}
	} 
}

function GenTree() {
	var Test = document.getElementsByName('menue')[0];
	var UsingIE = false;
	if(Test.contentDocument != null) {
		Test = Test.contentDocument;
	} else {
		Test = Test.contentWindow.document;
	}
    
	var MyStyle = document.createElement('link');
	MyStyle.setAttribute('type','text/css');
	MyStyle.setAttribute('rel','stylesheet');
	MyStyle.setAttribute('href','http://gpi-studios.com/3dgs/gsdynmenu.css');
	Test.getElementsByTagName('head')[0].appendChild(MyStyle);
	var preObj = Test.getElementsByTagName('pre')[0];
	var MyTree = CreateTree(preObj.innerHTML, 0);
	var MenuContainer = Test.createElement('div');
	MenuContainer.setAttribute('id','Menu');
	Test.body.appendChild(MenuContainer);
	preObj.style.display = 'none';
	Test.getElementById('Menu').innerHTML = genTreeHTML(MyTree, '0');
	AttachEvent(Test, 'click', HandleMouse, false);
	Test.getElementById('Cat0').style.display = 'inline';
}



Please let me know how it works for you.

PS: I hope this is the right forum for this. If not please move it to a more appropriate place.

greetings
K-Duke

Last edited by KDuke; 02/17/10 21:07.

Using A7 Free
Click and join the 3dgs irc community!
Room: #3dgs