Navigation List menu + jQuery Animate Effect Tutorial

Navigation List menu + jQuery Animate Effect Tutorial


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

Author: 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.

Share the love

16 comments

xerox
Thu, 12th March 2009
Good tips! thanks! Reply
bogdan pop
Fri, 27th March 2009
no demo? Reply
patxi
Sun, 3rd May 2009
that was cool Reply
webfixeddotnet
Mon, 4th May 2009
great!!! Reply
Mike Morales
Sat, 9th May 2009
Hi, i was try to do some similar like this,

$('#btn a, #btns a').mouseover(function() {
$(this).css('background-position','0px 0px');

}).mouseout(function() {
$(this).css('background-position','-348px 0px');
}).click(function() {
$(this).css('background-position','0px 0px');
});
});

look i need to keep the event .click although you go out the area of the btn, how make this??

thanks!! Reply
kevin Admin
Mon, 11th May 2009
@Mike: sorry for the late reply. I think you can solve it using css... set the A to display:block.. Reply
Kevin
Sat, 6th June 2009
@Simon: yea, I should upload the demo. Please bear it for a few days. On vacation at the moment :) Reply
simon
Sat, 6th June 2009
I would really like to a see a demo of this if you don't mind. Reply
JohnGalt
Sun, 19th July 2009
This is a great jquery tutorial. Added to http://tutlist.com Reply
xfer
Sat, 25th July 2009
very good contribution but doesn't work in internet explorer 6 and 7 Reply
indialike
Wed, 16th December 2009
Very nice and useful tutorials to web designers,
Thanks for posting. Reply
builder
Sun, 25th April 2010
Great tutorial. Thanks! Reply
wynajem
Sun, 27th June 2010
Nice article ;) Reply
patrice
Sat, 10th July 2010
yes very interresting but where is the demonstration ? I would like to test ! Reply
Raghibsuleman
Wed, 23rd March 2011
Good post its helpful... thanks
http://www.raghibsuleman.com/ Reply
Mallika
Thu, 23rd August 2012
Nice post. helpful to me. thanks Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement