Easy to Style jQuery Drop Down Menu

1. HTML

This would be the most common way to structure a list menu. It would make sense even if the CSS is disabled.

<ul id="nav">
	<li><a href="#">Parent 01</a></li>
	<li><a href="#">Parent 02</a>
		<ul>
			<li><a href="#">Item 01</a></li>
			<li><a href="#">Item 02</a></li>
			<li><a href="#">Item 03</a></li>
		</ul>
		<div></div>
	</li>
	<li><a href="#">Parent 03</a>
	<ul>
		<li><a href="#">Item 04</a></li>
		<li><a href="#">Item 05</a></li>
		<li><a href="#">Item 06</a></li>
		<li><a href="#">Item 07</a></li>
	</ul>			
		<div></div>
	</li>
	<li><a href="#">Parent 04</a></li>
</ul>

<div></div>

2. CSS

CSS is quite simple, we have to style two UL List – parent menu and submenu. We put float left for the parent menu so that all the list item would display inline. For the submenu, it’s hidden by default, and will only display on mouse over event.

body {font-family:arial; font-size:11px;}
.clear {clear:both}	
/* remove the list style */
#nav {
	margin:0; 
	padding:0; 
	list-style:none;
}	
	
	/* make the LI display inline */
	/* it's position relative so that position absolute */
	/* can be used in submenu */
	#nav li {
		float:left; 
		display:block; 
		width:100px; 
		background:#ccc; 
		position:relative;
		z-index:500; 
		margin:0 1px;
	}
		
	/* this is the parent menu */
	#nav li a {
		display:block; 
		padding:8px 5px 0 5px; 
		font-weight:700;  
		height:23px; 
		text-decoration:none; 
		color:#fff; 
		text-align:center; 
		color:#333;
	}

	#nav li a:hover {
		color:#fff;
	}
	
	/* you can make a different style for default selected value */
	#nav a.selected {
		color:#f00;
	}
	
		/* submenu, it's hidden by default */
		#nav ul {
			position:absolute; 
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding:0; 
			list-style:none;
		}
		
		#nav ul li {
			width:100px; 
			float:left; 
			border-top:1px solid #fff;
		}
		
		/* display block will make the link fill the whole area of LI */
		#nav ul a {
			display:block;  
			height:15px;
			padding: 8px 5px; 
			color:#666;
		}
		
		#nav ul a:hover {
			text-decoration:underline;	
		}

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
	margin:0 0 0 -2px;
}

3. Javascript

This could be one of the most simplest jQuery scripts. We are using hover mouse event and just the most basic jQuery animation slideUp and slideDown. 🙂 I love jQuery

$(document).ready(function () {	
	
	$('#nav li').hover(
		function () {
			//show its submenu
			$('ul', this).stop().slideDown(100);

		}, 
		function () {
			//hide its submenu
			$('ul', this).stop().slideUp(100);			
		}
	);
	
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s