Sub Links Script

[pixelzim]

I'm looking for a script that would fit the following example:
I have a horizontal global navigation with Home Media and Information. When you click either one of those global links it will show sub links in a separate div location without reloading the page. Basically what I'm thinking of is a slideshow effect. Like I have a div with all the sub links together in a set width and height hiding the overflow and when you click one of the global links it moves the sub links up inside the window hiding the previous links above it and showing the next ones. Like the links for home would get moved up when you click media and all you would see is the media links and the home links and information links would be hidden because of the overflow.

[Jon101]

I got lost somewhere in your post.... I dont quite follow.

Is there an example of what you want anywhere online?

[pixelzim]

Basically this is what the home page would look like with just the home sub links. So the stuff in the blurred section would be considered overflow and hidden.

This is what media would look like when you click it. The whole navigation gets positioned up inside the "window". The stuff that is blurred would be hidden outside the window.

[rangana]

<script type="text/javascript">
var rayNav={
loop:function(ulID)
	{
	this.reset();
	var navs=document.getElementById(ulID).getElementsByTagName('a');
	for(var i=0;i<navs.length;i++)
		{
		navs[i].onclick=function()
			{
			rayNav.reset();
			rayNav.exclude(this.getAttribute('href').split('#')[1]);
			}
		}
	},
reset:function()
	{
	var uls=document.getElementById('rightNav').getElementsByTagName('ul');
	for(var i=0;i<uls.length;i++)
		uls[i].style.display='none';
	},
exclude:function()
	{
	for(var i=0;i<this.exclude.arguments.length;i++)
		document.getElementById(this.exclude.arguments[i]).style.display='';
	}
};
window.onload=function()
	{
		rayNav.loop('nav'); // Pass the ID of the "main" nav
		rayNav.exclude('home');
		// You could exclude as many navs as you wish. rayNav.reset('home','media','information')
	}
</script>

<style type="text/css">
#nav{
list-style-type:none;}
#nav li{margin:1px;float:left;}
#nav li a{
display:block;
width:100px;
height:30px;
border:1px solid #222;
text-align:center;
line-height:25px;
}
#nav li a:hover{
background:#eee;
}
#rightNav{clear:both;
font-family:Arial,tahoma,verdana;
font-size:10pt;
}
#rightNav ul{
list-style-type:none;
}
#rightNav p{
font-weight:bold;
}
#rightNav ul a{
font-weight:bold;
color:#930;
text-decoration:none;
}
#rightNav ul a:hover{
text-decoration:underline;
}
</style>
<ul id="nav">
<li><a href="#home">Home</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#information">Information</a></li>
</ul>
<div id="rightNav">
<p>Home</p>
<ul id="home">
<li>- <a href="#">Home</a></li>
<li>- <a href="#">Home</a></li>
</ul>
<p>Media</p>
<ul id="media">
<li>- <a href="#">Images</a></li>
<li>- <a href="#">Wallpapers</a></li>
<li>- <a href="#">Sound Clips</a></li>
<li>- <a href="#">Buddy Icons</a></li>
</ul>
<p>Information</p>
<ul id="information">
<li>- <a href="#">Characters</a></li>
<li>- <a href="#">Episode List</a></li>
<li>- <a href="#">Quotes</a></li>
<li>- <a href="#">About the Creators</a></li>
</ul>
</div>

[pixelzim]

Wow thanks a lot man. you have no idea how much headache you just saved me.