Navigation List menu + jQuery Animate Effect Tutorial

Navigation List menu + JQuery Animate Effect Tutorial JQeury is a fantastic javascript framework that really amazes me a lot. This tutorial will show you how to create an attractive menu just a small touch by using JQuery animate effect. One of the reasons I learn JQuery is that it keeps my HTML code clean, I can isolate javascript in different files. Before this, I used onmouseover, onmouseout, onclick and element ID on the list, and you'll know how messy it can be. (I'm still using it in this website! gotta change it sometimes) Now, with JQuery, it saves me a lot of works. I learnt 3 lessons when I was preparing the code

1. Apply different colours to even and odd rows

I used to do it by using classes, you probably will know what I meant. Yes, that's right, two classes with different background colours

 <style>
 .even {background-color:#FFFFFF}
 .odd {background-color:#CCCCCC}
 </style>
 
 ..........
 
 <table>
 <tr class="odd"><td>Row 1</td></tr>
 <tr class="even"><td>Row 2</td></tr>
 <tr class="odd"><td>Row 3</td></tr>
 ..........
 </table>

Now, I use the following codes,:

<script>
$(document).ready(function() {
	$('table tr:even').addClass('even');
 	$('table tr:odd').addClass('odd');
});
</script>
 <table>
	<tr><td>Row 1</td></tr>
	<tr><td>Row 2</td></tr>
	<tr><td>Row 3</td></tr>
	..........
 </table>

2. Remove onmouseover, onmouseout and onclick events

This is the main objective to me, to reduce the amount of javascript codes thus, increases the level of tidiness and readibility of a html document. My old approach : (I know, I'm still using it)

 <table>
 <tr><td onmouseover="this.style.backgroundColor='#CCCCCC'" onmouseout="this.style.backgroundColor='#FFFFFF'" onclick="alert('Hello')">Row 1</td></tr>
 <tr><td onmouseover="this.style.backgroundColor='#CCCCCC'" onmouseout="this.style.backgroundColor='#FFFFFF'" onclick="alert('Hello')">Row 2</td></tr>
 <tr><td onmouseover="this.style.backgroundColor='#CCCCCC'" onmouseout="this.style.backgroundColor='#FFFFFF'" onclick="alert('Hello')">Row 3</td></tr>
 ..........
 </table>

The clean version, (you can also use JQuery <a href="http://docs.jquery.com/Attributes/addClass#class" rel="externa'">addClass</a> function):

 <script>
 $(document).ready(function() {
	$('ul#menu li a').mouseover(function() {
		$(this).css('background-color','#CCCCCC');
	}).mouseout(function() {
		$(this).css('background-color','#FFFFFF')
	}).click(function() {
		alert('Hello');
	});
});
 </script>
 <table>
	<tr><td">Row 1</td></tr>
	<tr><td">Row 2</td></tr>
	<tr><td">Row 3</td></tr>
 ..........
 </table>

3. Usability, make sure your A tag clickable area is big enough

This one is a simple tweak to your website usability. You can set the CSS attribute white-space to nowrap to avoid the extra paddings break the line into two.

<style>
ul li a {padding:5px;} /* depend on the width of your li*/
</style>

Alright...

With all the techniques combined together plus the animate effect from JQuery, we will get this final product. When you mouse over, it animates and shift to the right, shift it back on mouse out, it's a simple animation, but it does make your menu looks nicer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
	
		//Set the even row to different color
		$('ul#menu li:even').addClass('even');
		
		//configure the animations
		$('ul#menu li a').mouseover(function() {
		
			$(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 } );
		}).mouseout(function() {
			$(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 } )
		}).click(function() {
			$(this).animate( { fontSize:"20px" }, { queue:false, duration:500 } )
		});
			
	});	  
	  
</script>
<style>
ul#menu {
	margin:0;
	padding:0;
	width:180px;
	border:1px solid #7B8F8A;
	list-style:none;	
	background-color:#BCC499;
}

ul#menu li {
	margin:0;
	padding:5px 0 5px 20px;
	border-bottom:1px solid #7B8F8A;	
	font-family:arial;
	font-size:15px;
	font-weight:700;
	color:#F6EFDC;
}

ul#menu li:first-child {
	border-top:none
}

/* padding-right is set 100px and white-space is used to make sure it won't break into two lines */
ul#menu li a {
	color:#F6EFDC;
	text-decoration:none;	
	padding-right:100px;
	white-space:nowrap;
}

ul#menu li a {
	color:#FFFFFF;
	text-decoration:none;
}

.even {
	background-color:#92A68A
}

/* IE Hack */
*html ul#menu li a {
	padding-right:60px !important
}

</style>
</head>

<body>

   <ul id="menu">
	<li><a href="#">About Us</a></li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Follow Me</a></li>
	<li><a href="#">Downloads</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Subscribe</a></li>
   </ul>
   
</body>
</html>

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.