Dropdown meny...

Hej!

Jag har en lodrät meny och varje knapp är en bild. När man klickar på en knapp vill jag göra det möjligt att det under ska tillkomma alternativ i form av bildknappar.

Ex:

Info (En bildknapp)
- Underlänk (En bildknapp)
- Underlänk (En bildknapp)
- Underlänk (En bildknapp)

Inte en kotte?

HEAD:

<script type="text/javascript">
	
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/	

	
	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>

CSS:

	#mainContainer{
		width:125px;
		margin: 0 auto;
		height:150px;
		text-align:left;
		padding-left:10	px;
	}
	#leftColumn{
		width:140px;
		float:left;
		padding-left:10px;
	}
	#mainContent{
		width:590px;
		padding-left:10px;
		padding-right:10px;
		float:left;
	}

	/* 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: #333;
		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:6px;
	}

BODY:

<div id="meny" class="meny_text">
			  
			  <div id="mainContainer">
	<div id="leftColumn">
		<ul id="dhtmlgoodies_listMenu">
			<li><a href="index.html">- Startsidan</a>			</li>
			<li>- <a href="pagang.html" target="main">På gång</a>			</li>
			<li><a href="omseko.html" target="main">- Om Seko</a>
				<ul>
					<li><a href="#">1900 - 1940</a>
				</ul>
			</li>
			<li><a href="styrelsen.html" target="main">- Styrelsen</a>
				<ul>
					<li><a href="#">Person A</a>
				</ul>		
			</li>
			<li><a href="blimedlem.html" target="main">- Bli medlem</a>			</li>
			<li><a href="lagaravtal.html" target="main">- Lagar & avtal</a>
				<ul>
					<li><a href="#">Läs</a>
					<li><a href="#">Ladda ner PDF</a>
				</ul>	
			</li>
			<li><a href="lankar.html" target="main">- Länkar</a>			</li>
			<li><a href="kontakta.html" target="main">- Kontakta</a>			</li>
		</ul>
	</div>
</div>
</div>

Testa det. Tror det ska vara allt!

Tack så mycket Oskar!