Download simple list menu

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

	<style type="text/css">
	/* The following CSS is only for the demo */
	html{
		height:100%;
	}
	body{	
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin:0px;
		padding:0px;
		height:100%;
		font-size:0.9em;
		line-height:130%;
		background-color:#E2EBED;
		text-align:center;
	}
	
	#mainContainer{
		width:760px;
		margin: 0 auto;
		border-left:1px solid #000;
		border-right:1px solid #000;
		height:100%;
		text-align:left;
		background-color:#FFF;
	}
	#leftColumn{
		width:140px;
		float:left;
		padding-left:10px;
	}
	#mainContent{
		width:590px;
		padding-left:10px;
		padding-right:10px;
		float:left;
	}
	#topBar{
		height:100px;
			
	}
	/* End of demo CSS */
	
	/****************************************************************************************
	* 	LAYOUT CSS FOR THE MENU
	****************************************************************************************/
	#dhtmlgoodies_listMenu a{	/* Main menu items */
		color:#000;
		text-decoration:none;
		font-weight:bold;

	}
	#dhtmlgoodies_listMenu ul li a{	/* Sub menu */
		color: #F00;
		font-weight:normal;
	}
	#dhtmlgoodies_listMenu ul li ul li a{	/* Sub Sub menu */
		color: #000;
		font-style:italic;
		font-size:0.9em;
		font-weight:normal;		
	}
	
	#dhtmlgoodies_listMenu .activeMenuLink{	/* Styling of active menu item */
		color:blue;
	}
	
	
	/*
	No bullets
	*/	
	#dhtmlgoodies_listMenu li{
		list-style-type:none;	
	}
	
	/*
	No margin and padding
	*/
	#dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
		margin:0px;
		padding:0px;
	}

	/* Margin of sub menu items */
	#dhtmlgoodies_listMenu ul{
		display:none;
		margin-left:10px;
	}
	</style>
	
	<script type="text/javascript">
	/************************************************************************************************************
	Copyright (C) October 2005  DTHMLGoodies.com, Alf Magne Kalleland

	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.

	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.

	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
	written by Alf Magne Kalleland.

	Alf Magne Kalleland, 2010
	Owner of DHTMLgoodies.com

	************************************************************************************************************/

	
	var activeMenuItem = new Array();
	
	function isUlInArray(inputObj,ulObj){
		while(inputObj && inputObj.id!='dhtmlgoodies_listMenu'){
			if(inputObj==ulObj)return true;
			inputObj = inputObj.parentNode;			
		}		
		return false;
	}
	
	function showHideSub(e,inputObj)
	{
		

		if(!inputObj)inputObj=this;
		var parentObj = inputObj.parentNode;
		var ul = parentObj.getElementsByTagName('UL')[0];
		if(activeMenuItem.length>0){
			for(var no=0;no<activeMenuItem.length;no++){
				if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
					activeMenuItem[no].style.display='none';
					activeMenuItem.splice(no,1);
					no--;
				}
			}			
		}
		if(ul.offsetHeight == 0){
			ul.style.display='block';
			activeMenuItem.push(ul);
		}else{
			ul.style.display='none';
		}
	}
	
	function showHidePath(inputObj)
	{
		var startTag = inputObj;
		showHideSub(false,inputObj);
		inputObj = inputObj.parentNode;
		while(inputObj){			
			inputObj = inputObj.parentNode;
			if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
			if(inputObj.id=='dhtmlgoodies_listMenu')inputObj=false;	
		}		
	}
	
	function initMenu()
	{
		var obj = document.getElementById('dhtmlgoodies_listMenu');
		var linkCounter=0;
		var aTags = obj.getElementsByTagName('A');
		var activeMenuItem = false;
		var activeMenuLink = false;
		var thisLocationArray = location.href.split(/\//);
		var fileNameThis = thisLocationArray[thisLocationArray.length-1];
		if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
		if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));

		for(var no=0;no<aTags.length;no++){
			var parent = aTags[no].parentNode;
			var subs = parent.getElementsByTagName('UL');
			if(subs.length>0){
				aTags[no].onclick = showHideSub;	
				linkCounter++;
				aTags[no].id = 'aLink' + linkCounter;
			}	
			
			if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){				
				if(aTags[no].parentNode.parentNode){								
					var parentObj = aTags[no].parentNode.parentNode.parentNode;
					var a = parentObj.getElementsByTagName('A')[0];
					if(a.id && !activeMenuLink){
						
						activeMenuLink = aTags[no];
						activeMenuItem = a.id;
					}
				}
			}		
		}		

		if(activeMenuLink){
			activeMenuLink.className='activeMenuLink';
		}
		if(activeMenuItem){
			if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));	
		}
	}
	window.onload = initMenu;
	</script>

Put this into your <BODY> section

<div id="mainContainer">
	<div id="topBar">
	<h1>Heading</h2>
	</div>
	<div id="leftColumn">
		<ul id="dhtmlgoodies_listMenu">
			<li><a href="#">Products</a>
				<ul>
					<li><a href="#">Menus</a></li>
					<li><a href="#">Calendar scripts</a></li>
					<li><a href="#">Window scripts</a></li>
					<li><a href="#">Form widgets</a></li>
				</ul>
			</li>
			<li><a href="#">Support</a>
				<ul>
					<li><a href="http://www.dhtmlgoodies.com">Phone</a></li>
					<li><a href="http://www.dhtmlgoodies.com">Email</a></li>
					<li><a href="http://www.dhtmlgoodies.com">QnA</a></li>
				</ul>		
			</li>
			<li><a href="#">History</a>
				<ul>
					<li><a href="#">1900 - 1940</a>
						<ul>
							<li><a href="dhtmlgoodies_menu3.html">Active link</a></li>
							<li><a href="http://www.dhtmlgoodies.com">Another link</a></li>
						</ul>
					</li>
					<li><a href="http://www.dhtmlgoodies.com">1941 - 1980 </a></li>
					<li><a href="http://www.dhtmlgoodies.com">1981 - Present time</a></li>
				</ul>
			</li>
			<li><a href="#">The team</a>
				<ul>
					<li><a href="#">Person A</a>
					<li><a href="http://www.dhtmlgoodies.com">Person B</a></li>
					<li><a href="http://www.dhtmlgoodies.com">Person C</a></li>
					<li><a href="http://www.dhtmlgoodies.com">Person D</a></li>
					<li><a href="http://www.dhtmlgoodies.com">Person E</a></li>

				</ul>		
			</li>
			<li><a href="#">Locations</a>
				<ul>
					<li><a href="http://www.dhtmlgoodies.com">Norway</a></li>
					<li><a href="http://www.dhtmlgoodies.com">United States</a></li>
					<li><a href="http://www.dhtmlgoodies.com">United Kingdom</a></li>
					<li><a href="http://www.dhtmlgoodies.com">Sweden</a></li>
					<li><a href="http://www.dhtmlgoodies.com">Denmark</a></li>
					<li><a href="http://www.dhtmlgoodies.com">Finland</a></li>
				</ul>			
			</li>
		</ul>
	</div>
	<div id="mainContent">
	<p>	Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et alteaëra per purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati, quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua palloribus omnia pingunt. </p>
		<p><div style="float:right;padding:5px;padding-right:0px;width:200px;border:1px dotted #317082;background-color:#E2EBED">
		This is a very simple list based menu. Click on the menu items and the sub menu will appear. What's special about this menu is that it initially expand menu items if one of the urls in the menu points to this current page. See example at the left
		where the menu item "Active link" refers to this file dhtmlgoodies_menu3.html. As you can see, the menu is expanded an the menu item highlighted in blue.</div>
		E tenebris autem quae sunt in luce tuemurpropterea quia, cum propior caliginis aërater init oculos prior et possedit apertos, insequitur candens confestim lucidus aër,qui quasi purgat eos ac nigras discutit umbrasaëris illius; nam multis partibus hic estmobilior multisque minutior et mage pollens.qui simul atque vias oculorum luce replevit atque pate fecit, quas ante obsederat aër<ater>, continuo rerum simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. quod contra facere in tenebris e luce nequimuspropterea quia posterior caliginis aër crassior insequitur, qui cuncta foramina completobsiditque vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. Quadratasque procul turris cum cernimus urbis,propterea fit uti videantur saepe rutundae, angulus optusus quia longe cernitur omnissive etiam potius non cernitur ac perit eiusplaga nec ad nostras acies perlabitur ictus,aëra per multum quia dum simulacra feruntur,cogit hebescere eum crebris offensibus aër. hoc ubi suffugit sensum simul angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata videntur. </p>
		<p>Umbra videtur item nobis in sole moveri et vestigia nostra sequi gestumque. </P>
	</div>
</div>