Results 1 to 5 of 5

Thread: Sub Links Script

  1. #1
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sub Links Script

    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.

  2. #2
    Join Date
    Jan 2007
    Posts
    181
    Thanks
    5
    Thanked 3 Times in 3 Posts

    Default

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

    Is there an example of what you want anywhere online?

  3. #3
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    HTML Code:
    <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>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

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
  •