jQuery Drop Down Menu for RSS Subscription Tutorial

Introduction

I came across some websites with a drop down list specially made just for RSS subscription. They do it that way because they have different RSS feeds for different categories. I think it's quite useful because it grouped all the RSS feeds together and display it only when the users want it. Space saving and more simple user interface.

So, here we are, we will be creating a simple drop down menu for it. It's easy to skin, and easy to understand how it works as well.

1. HTML

This is quite easy, and I keep it semantic, so we are using list to form the structure.

<ul id="dropdown">
	<li><a href="#" class="parent">RSS Subscription »</a>	
		<ul class="children">
			<li><a href="#">All Categories</a></li>
			<li><a href="#">Ajax</a></li>
			<li><a href="#">CSS & HTML</a></li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Typography</a></li>
			<li><a href="#">Javascript</a></li>
			<li><a href="#">PHP & MySQL</a></li>
			<li><a href="#">Wallpaper</a></li>
			<li><a href="#">Wordpress</a></li>
		</ul>
	</li>
</ul>

2. CSS

There are two things, we need to style the main UL list (parent) and after that, style the second UL list (child). Parent list should have relative position. Child list must have absolute position, z-index set to the highest and hidden by default.

body {
	font-family:arial;	
}
	
a {
	text-decoration:none;
	color:#666;
}
	
a:hover {
	color:#e11;	
}
	
#dropdown {
	/* cancel the default list style */
	list-style:none;
	margin:0;
	padding:0;
	width:180px;
	position:relative;
}
	
	#dropdown li {
	}
	
	#dropdown li a.parent {
		display:block; 
		width:180px; height:40px;
		font-weight:700;
		padding:0 0 0 10px;
		line-height:35px;
		background:url(parent.gif) 0px 0px no-repeat;
	}
	
	#dropdown li a.hover {
		background:url(parent.gif) 0px -40px no-repeat;	
	}
	
		#dropdown ul {
			
			/* cancel the default list style */
			margin:0;
			padding:0;
			list-style:none;	
			display:none;
			
			/* make sure it has the highest z-index */
			position:absolute;
			left:0;
			z-index:500;
			background:#fff;
			width:180px;
			background:url(child.gif) left bottom no-repeat;
		}
		
			#dropdown ul li {
				font-size:11px;	
			}
			
				#dropdown ul li a {
					display:block; 
					font-weight:700;
					padding:0 0 0 10px;
					height:30px;
					color:#fff;
				}
				
				#dropdown ul li a:hover {
					color:#e11	
				}

3. Javascript

Javascript is quite simple, just an usual hover event. I put show() and hide() to display the submenu (I think we can make a CSS based drop down menu without using javascript), however, if you'd like to spice it up, you can use others animation like fadeIn/fadeOut or slideUp/slideDown. It's simple and effective.

$(document).ready(function () {

	$('#dropdown').hover(
		
		function () {

			//change the background of parent menu				
			$('#dropdown li a.parent').addClass('hover');
				
			//display the submenu
			$('#dropdown ul.children').show();
				
		},
		
		function () {

			//change the background of parent menu
			$('#dropdown li a.parent').removeClass('hover');			

			//display the submenu
			$('#dropdown ul.children').hide();
				
		}
		
	);
		
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial