Advanced Search

Results 1 to 1 of 1

Thread: Vertical to Horizontal Menu?

  1. #1
    Join Date
    Jul 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Vertical to Horizontal Menu?

    Does anyone know how I can change the javascript so that the (below) menu displays horizontally instead of vertically?
    Quote Originally Posted by Ancora View Post
    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
    Code:
    <?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:
    <!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>
    Last edited by chrisfromboji; 07-24-2007 at 02:24 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •