Jquery simple drop down menu

I always wonder about the dropdown menus available online.

Now i surprised how easy to create one with Jquery! WOW!

View Demo

Today i have searched for a dropdown menu with jquery and i found some. All are them are using ul-li , i dont like to use them, because i am no familiar with CSS, i mostly use tables. So i have desided to create my own dropdown menu (without ul li) using Jquery. I tried, and it is so easy…. just take a look at the code, u can easily understand…

<td width="100" class="main1">
						<a href="#" class="menu">Main1</a>
						<div class="sub">
							<a href="#" class="sub-menu">Sub 1-1</a>
							<a href="#" class="sub-menu">Sub 1-2</a>
							<a href="#" class="sub-menu">Sub 1-3</a>
							<a href="#" class="sub-menu">Sub 1-4</a>
						</div>
						</td>
						<td width="100" class="main1">
						<a href="#" class="menu">Main2</a>
						<div class="sub" style="width: 100px; height: 80px">
							<a href="#" class="sub-menu">Sub 2-1</a>
							<a href="#" class="sub-menu">Sub 2-2</a>
							<a href="#" class="sub-menu">Sub 2-3</a>
							<a href="#" class="sub-menu">Sub 2-4</a>
						</div>
						</td>
						<td width="100" class="main1">
						<a href="#" class="menu">Main3</a>
						<div class="sub">
							<a href="#" class="sub-menu">Sub 3-1</a>
							<a href="#" class="sub-menu">Sub 3-2</a>
							<a href="#" class="sub-menu">Sub 3-3</a>
							<a href="#" class="sub-menu">Sub 3-4</a>
						</div>
						</td>

class=”main1″ – this td contains the main link(class=menu) and the set of sub menu(class=sub)
Also note some css…

.menu { display: block;	width: 100%; background-color: #efefef; color: #404040; text-decoration: none; font-weight: bold; font-family:Verdana; font-size:10px; text-align: center; line-height: 2em }
.menu-hover { background-color: #D9D9D9; color: #D02023; }

.sub-menu { display: block;	width: 100%; background-color: #efefef; color: #404040; text-decoration: none; font-weight: bold; font-family:Verdana; font-size:10px; text-align: center; line-height: 2em }
:hover.sub-menu { background-color: #D9D9D9; color: #D02023; }

.sub { position: absolute; width: 100px; }

Then make it work using jquery

$(document).ready(function(){
	//adjust the left position of the sub menu
	$("div.sub").each(function(){
		$(this).css('left', $(this).parent().offset().left);
		$(this).slideUp('fast');
	});

        $(".main1").hover(function(){
		$("div.sub",this).show('fast');
		//$("div.sub",this).sildeDown('fast'); //use either
	}, function(){
		$("div.sub",this).hide('fast');
		//$("div.sub",this).slideUp('fast'); //use either
	});
});

We can add some more functionality…. add some code to highlight the active main menu on hover

	$(".main1").hover(function(){
		$("div.sub",this).slideDown('fast');

		//get the index, set the selector, add class
		myIndex = $(".main1").index(this);
		myMenu = $(".menu:eq("+myIndex+")");
		myMenu.addClass("menu-hover");
	}, function(){
		myMenu.removeClass("menu-hover");
		$("div.sub",this).slideUp('fast');
	});

View Demo
Download Source

Advertisements
This entry was posted in Tutorial and tagged , . Bookmark the permalink.

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