jQueryui drop down menu

By
pyr0t3chnician
Published: 07.14.2009Posted in: Tutorials

I was going to title this post: “jQuery, your friend and enemy” because I spent close to 2 hours today hating it and thinking of coding my own functions rather than trying to work with it. Eventually I figured out what I was doing and made it work beautifully with the custom ui template I made at their website. Because I learned it, I figured I would share it.

The menu is very simple, and very customizable. Because I am using a jQuery theme/template, you may have to tweak yours a little to take out the icons. First the jQuery code in the header:

<script type="text/javascript">
$(document).ready(function(){
	$('ul#icons li').hover(
		function() { $(this).addClass('ui-state-hover'); }, 
		function() { $(this).removeClass('ui-state-hover'); }
	);
	$('#menu').hover(
		function() { $('ul#icons').show('fast'); }, 
		function() { $('ul#icons').hide('fast'); }
	);
});
</script>

For jQuery n00bs, there are 2 things done here when the page loads. The first is it adds a hover class to my links (which I chose to do as a list). With a little editing, you could make it add a cover class to anything you want. Secondly, I add another hover function to the tag with the id “menu”. This one will show the list with the id=”icons” when I hover over it, and take it away when I move my mouse away. Not to mention, it is animated slightly, so it drops down, which is something that would take a hell of a lot more lines than just 3-4 to do.

Now for a little css to make our menu fantabulous and have it stuck at the top of the page:

<style type="text/css">
ul#icons {margin: 0; padding: 0; display:none;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; list-style: none;}
ul#icons span.ui-icon {margin: 0 4px; float:left;}
.menulinks{
	position:absolute;
	left:5px;
	top:5px;
	z-index:2;
	width:150px;
	padding:10px;
}
</style>

Like I said, I use a template that has multiple icons to chose from, and I use those in my menu. You guys can use whatever, but it will require some editing.

Finally, the HTML code with my links:

<div class="menulinks ui-corner-all ui-widget-content" id="menu">
<div style="text-align:center;border-bottom:solid 1px #CCC;" class="ui-widget"><h2 style="margin:1px;">Menu</h2></div>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<a href="index.php"><li class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-e"></span>Home</li></a>
<a href="manageClients.php"><li class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-e"></span>View Orders</li></a>
<a href="manageTickets.php"><li class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-e"></span>View Tickets</li></a>
</ul>
</div>

And once again I will say it, if you don’t have the template downloaded, it won’t work unless you edit some stuff. You can make a very basic one with just text very simply, but this is a nicer looking one cause I used a template.

If you want the stripped down, basic code, here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EPCO - Order Form</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#menu').hover(
		function() { $('ul#list').show('fast'); }, 
		function() { $('ul#list').hide('fast'); }
	);
});
 
</script>
<style type="text/css">
.menulinks{
	position:absolute;
	left:5px;
	top:5px;
	z-index:2;
	width:150px;
	padding:10px;
}
</style>	
</head>
<body>
<div id="menu" class="menulinks">
<div><h2>Menu</h2></div>
<ul id="list">
<a href="index.php"><li>Home</li></a>
<a href="manageClients.php"><li>View Orders</li></a>
<a href="manageTickets.php"><li>View Tickets</li></a>
</ul>
</div>
</body>
</html>

Thats it! Good luck. I will post more jQuery tutorials as I figure stuff out.