Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 67
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Trädmeny

Exempel

Kod


<style type="text/css">
.menu { padding-left: 10px; }
.menuChoice { text-decoration:none; color: rgb(0,0,150); font-family: Arial; font-weight: bold; font-size: 12px; }
.menuLink {text-decoration:none; color: rgb(150,150,255); font-family: Arial; font-size: 12px; }
</style>
<script language="JavaScript">
var compressedMode = false;
var collapseMode = false;
var findCurrentPage = false;
var stripQuerystring = true;
function getMenuNameFromLink(li){ var mnu=li.href.replace(/^\/+|\/+$/g,""); mnu=(mnu.match(/\//))?mnu.substring(mnu.lastIndexOf("/")+1):mnu; return mnu;}
function initMenu(){
	if(!document.getElementById){ return }
	var current=document.getElementById('menuroot').firstChild;
	while(current){
		if(current.className=="menu"){ collapseAll(current); }
		current=current.nextSibling;
	}
	if(findCurrentPage&&stripQuerystring){ findLink(location.pathname); }
	if(findCurrentPage&&!stripQuerystring){ findLink(location.href); }
}
function findLink(url){
	if(stripQuerystring){ url=url.split('#')[0].split('?')[0]; }
	var allLinks=new Array(); allLinks=getAllChildsByTagName(document.getElementById('menuroot'),'a');
	var match=false;
	for(var i in allLinks){
//		if(allLinks[i].href.split('#')[0].split('?')[0].toLowerCase().right(url.length)==url.toLowerCase()){
		if(allLinks[i].href.toLowerCase().right(url.length)==url.toLowerCase()){
			match=allLinks[i];
			break;
		}
	}
	if(match){
//		initMenu();
		var lastlinkname=false;
		while(match=match.parentNode){
			if(match.className=="menu"){
				match.style.display="block";
				lastlinkname=match.id;
			}
			var li=document.getElementsByTagName("a");
			for(var n=0;n<li.length;n++){
				if(lastlinkname&&getMenuNameFromLink(li[n])==lastlinkname && li[n].innerHTML.match(/^(\+|\-)/)){
					li[n].innerHTML="-"+li[0].innerHTML.substring(1);
				}
			}
		}
	}
}
String.prototype.right = function(len){ return this.substring(this.length-len); }
function collapseAll(element){
	if(!document.getElementById){ return }
	menues=getAllChildsByTagName(element,"div");
	for(var i in menues){
		menues[i].style.display="none";
		if(getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML.match(/^(\+|\-)/)){
			getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML="+"+getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML.substring(1);
		}
	}
	element.style.display="none";
}
function getAllChildsByTagName(element,tagname){
	var	parents=new Array(); var elements=new Array(); var current;
	parents[0]=element;
	for(var i in parents){
		current=parents[i].firstChild;
		while(current){
			if(current.hasChildNodes){ parents[parents.length]=current; }
			if(current.tagName==tagname.toUpperCase()){elements[elements.length]=current;}
			current=current.nextSibling;
		}
	}
	return elements;
}
function getPreviousSiblingByClassName(element,classname){
	while(element.previousSibling){
		if(element.previousSibling.className==classname){ return element.previousSibling; }
		element=element.previousSibling;
	}
	return false;
}
function sw(li){
	var mnu=getMenuNameFromLink(li);
	if(!document.getElementById){ return false; }
	if(document.getElementById(mnu).style.display=='block'){
		if(collapseMode){
			collapseAll(document.getElementById(mnu));
		} else {
			document.getElementById(mnu).style.display='none';
		}
	} else {
		if(document.getElementById(mnu).parentNode.className=="menu" && compressedMode){
			collapseAll(document.getElementById(mnu).parentNode);
			document.getElementById(mnu).parentNode.style.display="block";
		}
		document.getElementById(mnu).style.display="block";
	}
	if(li.innerHTML.match(/^(\+|\-)/)){
		li.innerHTML=(document.getElementById(mnu).style.display == 'none')?"+"+li.innerHTML.substring(1):"-"+li.innerHTML.substring(1);
	}
	return false;
}
window.onload=function(){ initMenu(); }
</script>
<div id="menuroot" class="menu">
<a href="menu_a" onClick="return sw(this);" class="menuChoice">+ Menu A</a><br>
<div id="menu_a" class="menu">
	<a href="menu_a_a" onClick="return sw(this);" class="menuChoice">+ Menu A-A</a><br>
	<div id="menu_a_a" class="menu">
		<a href="menu_a_a_a" onClick="return sw(this);" class="menuChoice">+ Menu A-A-A</a><br>
		<div id="menu_a_a_a" class="menu">
			<a href="#" class="menulink">Länkar A-A-A-1</a><br>
			<a href="http://www.jojoxx.net/" class="menulink">Länkar A-A-A-2</a><br>
			<a href="#" class="menulink">Länkar A-A-A-3</a><br>
		</div>
		<a href="menu_a_a_b" onClick="return sw(this);" class="menuChoice">+ Menu A-A-B</a><br>
		<div id="menu_a_a_b" class="menu">
			<a href="DOMmenu2.html" class="menulink">Länkar A-A-B-1</a><br>
			<a href="DOMmenu2-2.html" class="menulink">Länkar A-A-B-2</a><br>
			<a href="#" class="menulink">Länkar A-A-B-3</a><br>
		</div>
	</div>
	<a href="menu_a_b" onClick="return sw(this);" class="menuChoice">+ Menu A-B</a><br>
	<div id="menu_a_b" class="menu">
		<a href="menu_a_b_a" onClick="return sw(this);" class="menuChoice">+ Menu A-B-A</a><br>
		<div id="menu_a_b_a" class="menu">
			<a href="#" class="menulink">Länkar A-B-A-1</a><br>
			<a href="#" class="menulink">Länkar A-B-A-2</a><br>
		</div>
	</div>
	<a href="#" class="menulink">Länkar A-1</a><br>
</div>
<a href="menu_b" onClick="return sw(this);" class="menuChoice">+ Menu B</a><br>
<div id="menu_b" class="menu">
	<a href="menu_b_a" onClick="return sw(this);" class="menuChoice">+ Menu B-A</a><br>
	<div id="menu_b_a" class="menu">
		<a href="menu_b_a_a" onClick="return sw(this);" class="menuChoice">+ Menu B-A-A</a><br>
		<div id="menu_b_a_a" class="menu">
			<a href="#" class="menulink">Länkar B-A-A-1</a><br>
			<a href="#" class="menulink">Länkar B-A-A-2</a><br>
		</div>
		<a href="#" class="menulink">Länkar B-A-1</a><br>
	</div>
</div>
</div>

,