jQuery Drop Down Menu for RSS Subscription Tutorial

jQuery Drop Down Menu for RSS Subscription Tutorial


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!

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

7 comments

Slavi
Thu, 17th December 2009
looks pretty nice & I like it. Reply
chandra sekhar
Fri, 18th December 2009
In IE6, the page content is moving down .can you fix the problem.

Remaining browsers it is working perfect Reply
Ben
Sun, 11th July 2010
and how it looks with 2 menu "RSS Subscription" ? Reply
Chris
Sat, 2nd July 2011
Quite pointless as it doesn't work if you have more than one drop down menu. But nice work any way. Reply
sridhar
Wed, 11th April 2012
hey bro its nice work.but how to add the script into my site pls tell me that one also thanku Reply
shalini
Mon, 18th June 2012
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
Tue, 19th June 2012
Change line 11:

setTimeout(function () { $('#dropdown ul.children').show(); }, 1000); //delay 1 second 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