Navigation List menu + jQuery Animate Effect Tutorial

Written by Kevin Liew on 11 Mar 2009
184,607 Views • Tutorials

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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>

Now, I use the following codes,:

 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>

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)

 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>

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

 <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>
<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>
  <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>
 <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> 
 <!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>
 <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>
<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>
  <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>
 <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> 
 <!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>&l
By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Related Articles
Simple Lava Lamp Menu Tutorial with jQuery
Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

16 comments
patrice 14 years ago
yes very interresting but where is the demonstration ? I would like to test !
Reply
Raghibsuleman 13 years ago
Good post its helpful... thanks
http://www.raghibsuleman.com/
Reply
Mallika 12 years ago
Nice post. helpful to me. thanks
Reply