sliding_menu

by mikehudak

HTML

<div id="navigation-block">
    <img src="http://d2o0t5hpnwv4c1.cloudfront.net/004_Moo/tutorial/demo/background.jpg" id="hide" />
    <h2><span>Navigation Effect Using jQuery</span></h2>
    <p>By Bedrich Rios</p>
    <ul id="sliding-navigation">
        <li class="sliding-element"><h3>Navigation Title</h3></li>
        <li class="sliding-element"><a href="#">Link 1</a></li>
        <li class="sliding-element"><a href="#">Link 2</a></li>
        <li class="sliding-element"><a href="#">Link 3</a></li>
        <li class="sliding-element"><a href="#">Link 4</a></li>
        <li class="sliding-element"><a href="#">Link 5</a></li>
    </ul>
</div>

CSS

body 
{
	margin: 0;
	padding: 0;
	background: #1d1d1d;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}

h2 	
{ 
	color: #999;
	margin-bottom: 0; 
	margin-left:13px;
	background:url(navigation.jpg) no-repeat;
	height:40px;
}

h2 span
{
	display: none;
}

p	
{ 
	color: #ffff66; 
	margin-top: .5em;
	font-size: .75em;
	padding-left:15px;	
}

#navigation-block {
	position:relative;
	top:100px;
	left:200px;
}

#hide {
	position:absolute;
	top:30px;
	left:-190px;
}

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; }

JavaScript

$(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);
		});
	});
}