Tutorials

jQuery Drop Down Menu for RSS Subscription Tutorial

Written by Kevin Liew on 03 Nov 2009
31,522 Views • Shares
7 comments

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!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

7 comments
Slavi 6 years ago
looks pretty nice & I like it.
Reply
chandra sekhar 6 years ago
In IE6, the page content is moving down .can you fix the problem.

Remaining browsers it is working perfect
Reply
Ben 6 years ago
and how it looks with 2 menu "RSS Subscription" ?
Reply
Chris 5 years ago
Quite pointless as it doesn't work if you have more than one drop down menu. But nice work any way.
Reply
sridhar 4 years ago
hey bro its nice work.but how to add the script into my site pls tell me that one also thanku
Reply
shalini 4 years ago
Hi i'm new to this jquery . can u tel how to add delay timing to display the drop down list?
Reply
Kevin Liew Admin 4 years ago
Change line 11:

setTimeout(function () { $('#dropdown ul.children').show(); }, 1000); //delay 1 second
Reply