Register now or login here to start promoting your blog and your favourite articles.
jQuery Drop Down Menu for RSS Subscription Tutorial
3 Nov 2009 - 3 Comments
Learn how to create a simple drop down list with animation effect in this tutorial. This drop down menu can be easily skin and customize.
Author: kevin | Source: queness
Demonstration Download

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!

Demonstration Download

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

Share This Post to Support Me! :)


Comments

chandra sekhar on 18 Dec 2009 says:
In IE6, the page content is moving down .can you fix the problem.

Remaining browsers it is working perfect
Slavi on 17 Dec 2009 says:
looks pretty nice & I like it.
  • Page :
  • 1

Leave a comment

Subscribe RSS Subscribe RSS, Keep yourself updated with queness latest posts!
Pixel Crayons Increase your traffic!

Buy wholesale computers directly from China at DHgate.com

Discover the tools to build your e-Commerce Site with Netfirms

  •  
  •  
  •  
  •  
  •  

Community News

Recent Comments

Random Posts



Digging in Wordpress
View all posts and news Back to top

About the Author

A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to say hi to me, or follow me on twitter.

Kevin Liew

Partner

  • Web and Designers
  • CSS Style
  • PV.M Garage Blogzine - (Italian)
  • TutsValley
  • Designrfix
  • CoolVibe
  • Web Developer Juice
  • Denbagus
  • Web Hosting Secret Revealed
  • PSD to HTML Conversion
  • BlueHost