Designing navigation is one of the most important part of the web development cycle. It becomes more important because each site requires its own type of navigation and not to forget, people do like to see something different in their website.

Here’s an example of the navigation in action

To start with, the only tricky part in this navigation is the movement of the background. It’s actually all background-position magic. Who knew one property could be used in so many ways to create so many more effects

The HTML

		<div id="navigation">
			<ul>
				<li><a href="http://blog.avinash.com.np">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Details</a></li>
				<li><a href="#">Feedback</a></li>
			</ul>
		</div>

The CSS

		#navigation{
				color:#000;
				width:250px;
				font-family: 'Artifika', arial, serif;
				font-size:16px;
			}
			#navigation ul{
				list-style-type:none;
				margin:0px;
				padding:0px;
			}
			#navigation ul li{
				display:block;
				background:#eee;
				text-align:right;
				margin-bottom:2px;
			}
			#navigation ul li a{
				display:inline-block;
				padding:2px 7px 2px 25px;
				background:url(nifty-navigation-bg.jpg) no-repeat;
				background-position:0px 0px;
				color:#000;
				text-decoration:none;
			}

The Javascript

		$(document).ready(function () {
				$("div#navigation ul li").hover(function(){
					var a=$(this).find('a:first');
					_width=a.width()+32;					
					a.stop().animate({"background-position" : _width+"px 0px"},200);				
				},
				function(){
					var a=$(this).find('a:first');
					a.stop().animate({"background-position" : "0px 0px"},200);
				});

Well, that’s one simple method to get the effect. If any other methods are available, do let me know.

If this was not enough, here’s another navigation effect, one of my favourite the Lavalamp effect