The simple and elegant roll over effects that I liked. I decided to imitate the effect with CSS and jQuery, and would like to share this technique today.

Step 1. Wireframe – HTML

This part is very simple. Your typical unordered list with links.

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Step 2. Styling – CSS

Only thing special about the below properties will be that each list item has an overflow of hidden to imitate the masking technique. Check out the image below to see what I mean.

jQuery Navigation – CSS

Notice there were no duplicate tags in the markup in step 1. We will be adding that later with a few lines of jQuery.

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/
	float: left;
	height:40px;
}

ul#topnav a, ul#topnav span { /*–The and share the same properties since the will be a duplicate of the
tag–*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*–Vertical alignment of text–*/
}
ul#topnav a{ /*–This is basically the hover state of navigation–*/
color: #555;
background-position: left bottom;
}
ul#topnav span{ /*–Default state of navigation–*/
background-position: left top;
}

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

$(document).ready(function() {

	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the </a><a> tag
		$(this).find("span").show().html(linkText); //Add the text in the <span> tag
	}); 

	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the <span> tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Move the <span> back to its original state (0px)
		}, 250);
	});

});
</span></span></span></a>

Demo: http://www.sohtanaka.com/web-design/examples/fancy-navigation/
Download Jquery File: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
Source: http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/

Related Listings:

1. 10 incredible JQuery navigation menus JQuery is a lightweight, cross-browser compliant, and extremely powerful Javascript...
2. Jquery Animated Hover Animated Hover is a plugin for jQuery to create animated...
3. Kwicks for jQuery – Horizontal Animated Menu Menu of a web page is the most important and...
4. Animated Hover using Jquery Animated Hover provides animated transitions between hovered items for any...
5. Create a Sprited Navigation Menu Using CSS and MooTools CSS sprites are all the rage these days. And why...

Do you like this post?

Email: