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

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