www.webdeveloper.com
Results 1 to 1 of 1

Thread: New to js, need help with Jquery sliding menu

  1. #1
    Join Date
    Jul 2009
    Posts
    1

    New to js, need help with Jquery sliding menu

    NetTuts did a great tutorial that walked through how to create a Mootools inspired navigation. The problem is that the menu animates left and I need it to animate right
    The demo is: http://net.tutsplus.com/tutorials/ja...#comment-84687:

    The Javascript is pretty short:
    Code:
    $(document).ready(function()
    {
    	slide("#sliding-navigation", 25, 15, 150, .8);
    });
    
    function slide(navigation_id, pad_out, pad_in, time, multiplier)
    {
    	// creates the target paths
    	var list_elements = navigation_id + " li.sliding-element";
    	var link_elements = list_elements + " a";
    	
    	// initiates the timer used for the sliding animation
    	var timer = 0;
    	
    	// creates the slide animation for all list elements 
    	$(list_elements).each(function(i)
    	{
    		// margin left = - ([width of element] + [total vertical padding of element])
    		$(this).css("margin-left","-180px");
    		// updates timer
    		timer = (timer*multiplier + time);
    		$(this).animate({ marginLeft: "0" }, timer);
    		$(this).animate({ marginLeft: "15px" }, timer);
    		$(this).animate({ marginLeft: "0" }, timer);
    	});
    
    	// creates the hover-slide effect for all link elements 		
    	$(link_elements).each(function(i)
    	{
    		$(this).hover(
    		function()
    		{
    			$(this).animate({ paddingLeft: pad_out }, 150);
    		},		
    		function()
    		{
    			$(this).animate({ paddingLeft: pad_in }, 150);
    		});
    	});
    }
    Can anyone give me a clue on how to change this so that it animates left?

    Also the css:
    Code:
    ul#sliding-navigation
    {
    	list-style: none;
    	font-size: .75em;
    	margin: 30px 0;
    	padding: 0;
    }
    
    ul#sliding-navigation li.sliding-element h3,
    ul#sliding-navigation li.sliding-element a
    {
    	display: block;
    	width: 150px;
    	padding: 5px 18px;
    	margin: 0;
    	margin-bottom: 5px;
    }
    
    ul#sliding-navigation li.sliding-element h3
    {
    	color: #fff;
    	background:#333 url(heading_bg.jpg) repeat-y;
    	font-weight: normal;
    }
    
    ul#sliding-navigation li.sliding-element a
    {
    	color: #999;
    	background:#222 url(tab_bg.jpg) repeat-y;
    	border: 1px solid #1a1a1a;
    	text-decoration: none;
    }
    
    ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }
    Last edited by Kor; 07-28-2009 at 09:45 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles