Vertical to Horizontal Menu?

Does anyone know how I can change the javascript so that the (below) menu displays horizontally instead of vertically?

Ancora said: ↑

Tested in IE6 and Firefox.
Hover on main menu items, sub-items are displayed.
Main menu items are not required to have sub items.

MenuTree.xml


<?xml version="1.0" ?>	
	<menu>
		<main> 
			<text>First</text>
			<sub>
				<text>Anything</text>
				<link>links/anything.html</link>
			</sub>
			<sub>
				<text>Everything</text>
				<link>links/everything.html</link>
			</sub>
			<sub>
				<text>Nothing</text>
				<link>links/nothing.html</link>
			</sub>
		</main>
		<main>
			<text>Second</text>
			<link>links/apples.html</link>
		</main>
		<main> 
			<text>Third</text>
			<sub>
				<text>Something</text>
				<link>links/something.html</link>
			</sub>
		</main>
		<main>
			<text>Fourth</text>
			<link>links/oranges.html</link>	
		</main>
	</menu>

Code (markup):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	var response = "";
	var nContainer = "";
	var mainItemsText = [];
	var mainItemsLink = [];
	var subItemsText = [];
	var subItemsLink = [];
	var mainItemsWithSubs = [];
	var IE = true;
	if (navigator.appName != "Microsoft Internet Explorer"){IE = false}

	function hideSubs(nMain){

		 var nSubs = nMain.getElementsByTagName('dd');
		 for (i=0; i<nSubs.length; i++)
			{
			 nSubs[i].style.display = 'none';
			}
	}

	function showSubs(nMain){

		 var nSubs = nMain.getElementsByTagName('dd');
		 for (i=0; i<nSubs.length; i++)
			{
			 nSubs[i].style.display = '';
			}
	}

	function setHoverDisplay(){

		if (IE)
			{
			 for (i=0; i<mainItemsWithSubs.length; i++)
				{
			 	 for (n=0; n<subItemsText[i].length; n++)
					{
				 	 nContainer.childNodes[mainItemsWithSubs[i]].childNodes[n+1].style.display = 'none';
				 	 nContainer.childNodes[mainItemsWithSubs[i]].onmouseover = function(){showSubs(this)}
				 	 nContainer.childNodes[mainItemsWithSubs[i]].onmouseout = function(){hideSubs(this)}
					}
				}
			}
		else 	{
			 for (i=0; i<mainItemsWithSubs.length; i++)
				{
			 	 for (n=0; n<subItemsText[i].length; n++)
					{
				 	 nContainer.childNodes[mainItemsWithSubs[i]+1].childNodes[n+1].style.display = 'none';
				 	 nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseover = function(){showSubs(this)}
				 	 nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseout = function(){hideSubs(this)}
					}
				}
			}
	}
		
	function buildMenu(){

		nContainer = document.getElementById('menuContainer');
		mainItemsWithSubs = [];
		var n = 0;
		for (i=0; i<mainItemsText.length; i++)
			{
			 var nItem = document.createElement('dt');
			 var nLink = document.createElement('a');
			 nItem.appendChild(nLink);
			 nLink.appendChild(document.createTextNode(mainItemsText[i]));
			 if (mainItemsLink[i] != undefined)
				{
				 nLink.setAttribute('href',mainItemsLink[i]);
				}
			 else	{
				 nLink.setAttribute('href',"#");
				 nLink.onclick = function(){return false;}
				 mainItemsWithSubs[n++] = i;
				}
			 nContainer.appendChild(nItem);
			}
		for (i=0; i<mainItemsWithSubs.length; i++)
			{
			 for (s=0; s<subItemsText[i].length; s++)
				{
			 	 nItem = document.createElement('dd');
				 nLink = document.createElement('a');
				 nItem.appendChild(nLink);
				 nLink.appendChild(document.createTextNode(subItemsText[i][s]));
				 nLink.setAttribute('href',subItemsLink[i][s]);
				 if (IE){nContainer.childNodes[mainItemsWithSubs[i]].appendChild(nItem)}
				 else {nContainer.childNodes[mainItemsWithSubs[i]+1].appendChild(nItem)}
				}
			}
		setHoverDisplay();
	}

	function parseResponse(){

		var n = 0;
		var s = 0;
		var mainItems = response.getElementsByTagName('main');
		if (IE)
			{
			 for (i=0; i<mainItems.length; i++)
				{
			 	 mainItemsText[n] = mainItems[i].firstChild.text;
			 	 if (mainItems[i].childNodes[1].nodeName == "link")
					{
				 	 mainItemsLink[n] = mainItems[i].childNodes[1].text;
					}
			 	 n++;
				}	
			}
		else 	{
			 for (i=0; i<mainItems.length; i++)
				{
			 	 mainItemsText[n] = mainItems[i].childNodes[1].firstChild.data;
				 if (mainItems[i].childNodes[3].nodeName == "link")
					{
					 mainItemsLink[n] = mainItems[i].childNodes[3].firstChild.data;
					}
				 n++;
				}
			}
		for (i=0; i<mainItems.length; i++)
			{
			 if (IE && mainItems[i].childNodes[1].nodeName == "sub")
				{
				 subItemsText[s] = [];
				 subItemsLink[s] = [];
				 for (n=0; n<mainItems[i].getElementsByTagName('sub').length; n++)
					{
					 subItemsText[s][n] = mainItems[i].childNodes[n+1].childNodes[0].text;
					 subItemsLink[s][n] = mainItems[i].childNodes[n+1].childNodes[1].text;
					}
				 s++;
				}
			 if (!IE && mainItems[i].childNodes[3].nodeName == "sub")
				{
				 subItemsText[s] = [];
				 subItemsLink[s] = [];
				 var subs = mainItems[i].getElementsByTagName('sub');
				 for (n=0; n<subs.length; n++)
					{
					 subItemsText[s][n] = subs[n].childNodes[1].firstChild.data;
					 subItemsLink[s][n] = subs[n].childNodes[3].firstChild.data;
					}
				 s++;
				}
			}
		buildMenu();				
	}

	function getMenuTree(){
	
		var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();   
		request.onreadystatechange = function()
			{
			 if (request.readyState == 4)
				{
			 	 if (request.status == 200)
					{
					 response = request.responseXML;
					 parseResponse();
					}
			 	 else 	{alert('Error MenuTree.xml '+ request.statusText)}
				}
			}
		var forceGET = "?n="+ parseInt(Math.random()*999999999);
		request.open("GET", "MenuTree.xml"+forceGET, true);
		request.send(null); 
	}
	
	onload=getMenuTree;

</script>
<style type="text/css">

	dt {background-color:#b0c4de;text-indent:5px}
	dd {background-color:#87ceeb}
	a {color:#00008b}

</style>
</head>
	<body>

		<div id='menuContainer' style='border:1px solid black;background-color:#afeeee;height:200px;width:150px;font-size:12pt;padding:5px;overflow:auto;font-family:arial;font-weight:bold;line-height:140%'>
		</div>

	</body>
</html>

Code (markup):

Click to expand...

Log in or Sign up

Vertical to Horizontal Menu?

chrisfromboji Peon

Log in or Sign up

Vertical to Horizontal Menu?

chrisfromboji Peon

Useful Searches