9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Wednesday, June 20, 2012

Simple Drop Down Menu with Jquery and CSS

This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu  with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects. 

Drop Down Menu with Jquery and CSS

Download Script     Live Demo

HTML Code
Simple HTML code
<div class="dropdown">
<a class="account" >My Account</a>

<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>

</div>

Drop Down Menu with Jquery and CSS

JavaScript
Contains javascipt code. $(".account").click(function(){}- account is the class name of the My Account anchor tag. Using $(this).attr('id') calling id value of the anchor tag and based on condition showing .submenu div box and the same time $(this).attr('id', '1') adding id value too.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
"></script>;
<script type="text/javascript" >
$(document).ready(function()
{

$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
Document click on document $(document).mouseup(function() hiding the .submenu

CSS Code
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account 
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
Comments
{ 133 comments }
Wambutura For Central Imenti said...

excellent script..

Aumkar Thakur said...

wow its awesome thnxx for code

unnamalai chetty chavady rajasekaran said...

nice

Jagan Krishnaraj said...

Nice Script. Thanks for the code.

blog hamza said...

verry nice but i hove small code and not complex:

$(document).ready(function()
{
$(".account").click(function()
{

$('.submenu').toggle();
});

//Mouseup textarea false
$(".submenu").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});
//Textarea without editing.
$(document).mouseup(function()
{
$(".submenu").hide();
});

});

Rodrigo Fraga said...

Very good script, congratulations, always creates great posts.

Sanjeev Tomar said...

Very nice scripts. Thanks for Sharing.

Anonymous said...

Nice script, would be good if you could do a Mega Drop Down Menu ?

Also could your replace ".click" with ".toggle" as an alternative ?

Regards

Anonymous said...

Thanks for sharing

Rajesh said...

nice script keep up your goodwork

Limit Entropy said...

Thanks, impressive script and inspiring piece of code.

eGurus said...

as usual, you always post a very useful stuff! I will use this css trick for sure! thanks a lot, man! :)

Davut GÜRBÜZ said...

good script and good style.

王世華 said...

cool

Anonymous said...

Would it be possible to do a hover version?

$(".account").hover(function()

Doesnt allow you to get to the menu, it dissapears before the mouse can get to it.

Anonymous said...

not coming properly in IE 7,8,9

Rafael said...

Thanks again for the code.
Excellent!

Anonymous said...

very usefull

Manuel Peña said...

:D nice

chaves said...

as always nice tuts

Reda Makhchan said...

do you know .toggle() ?
code less do more...

thks

HASEEB said...

nice work

malinda ranasinghe said...

great one..can you annimate that? is it possible?

Andrew Liu said...

excellent

ashvin said...

Cool...

lilmopat said...

Good job

Ajay Thakur said...

Nice Script again...

Anonymous said...

I will learn like account login / logout script homework, thanks you is work script a best great

Chiranjeev said...

Nice drop down menu. Thanks for this post.

ram said...

good one........

yusida said...

Nice one, I always follow this blog.. :D

Anonymous said...

awesome

abhinav said...

Nice script

Darshil Shah said...

nice script works perfectly

veerendra raghuvanshi said...

Awesome man

Darshil Shah said...

good one

Anirudh said...

You have really nice blog....nice script

Anonymous said...

Nice!!!

Anonymous said...

nice

Uğur said...

nice.. thanx !

phphunger said...

wow..nice tutorial...

Suraj Sharma said...

very nice

Willian Levinski Keller said...

nice

Anonymous said...

good thanks

Ashish said...

Very basic... I expect something better from you!

nguyen dungfit said...

menu beautyful,code good,thanks

Anonymous said...

pretty simple code! Simple but works!
you can use a input checkbox + css w/ pseudo class + one js event binding to achieve the same effect

clchuong7913 said...

very goods, thank so much

Anonymous said...

cool!!!

asfer said...

thanks bro..

Amit said...

looks like twitter menu

srinivas said...

nice brother... u done excellent job...

dskanth said...

Good example... however if the My Account text had a background color by default, it would be nice, rather than the background appearing when we click on it.

Raghavender said...

Greate style of coding...

Anonymous said...

very good

chahiri said...

wow its awesome thnx for the code

Ranjeet said...

Design of menu is awesome. great work

Jason said...

Looks great

FutureTech said...

Nice script :-)

Mat said...

Great Script. Will be using in the future

Anonymous said...

Very nice script

F Diengdoh said...

I don't know the reason why you have a long javascript code as this:

$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});


where you could achieve a more beautiful thing by using this code

$(".dropdown").hover(function(){
$(".submenu").slideToggle(400);
});

Michael Schmid said...

nice script - but how to get the border-radius work with internet-Exlorer

Mangalamurthy Bhat said...

its rally awesome

Mandi said...

Excellent design :)

Super Gaptek said...

Very good script, congratulations, always creates great posts.

Frank Zhang said...

Cool, I like it

Frank Zhang said...

Really cool, thank you.

Short Code said...

Really Very Useful Script for Web Developers.

Anonymous said...

can any one try to explain to me how and what slideTggle() does.... i am new in PHP n javascript

Kanchi said...

Great work ...The drop shadow and rounded corners are not working in IE9. Can Fix it? Thanks

Abhishek Kumar Tiwari said...

How can we implement it with more than 1 dropdown submenu ?

Nathan Walsh said...

Yes, I want to have multiple dropdowns. How do I achieve that without both of them opening?

Anonymous said...

good work

Taran said...

Great tutorial.Thanks for sharing.

Anonymous said...

Nice! good work...

narendar said...

super

narendar said...

good..

robocon said...

Thanks for example

Anonymous said...

good post.. nice to work out..

Alexandra Buerger said...

This looks amazing! How do you implement more than one drop down menu? I am new to web design and struggling with finding a solution. Any suggestions?

Thanks
Alexandra

Legal steroids said...

I was looking for crucial information on this subject.Thanks for taking the time to discuss this,They have been a big help for us.Thanks a lot.

Anonymous said...

ThisUsrRes

Karthik Kandhan said...

nice code tanks for sharing

cyiberart said...

thanks for trik

Anonymous said...

how i can make it in multiple div ?

Anonymous said...

I get a code error in the JS file on line 22.

Anonymous said...

It works only in demo. If you put in on a real website, the sub menu appears in the left top corner.

chockonutty said...

Nice code. But I found a little problem with it. When you have a db record, for example like :
This is a "test" field!
When you click to edit, the text in quotes disappears. Iw it at the beginning, the whole filed is gone.
I tried many ways to fix this, but with no success.
Where exactly I have to escape the characters like theese?

chockonutty said...

thank you:)

ultra said...

Great work man thanks!

Vasanth kumar said...

Nice work dude...thanks alot

fauji said...

thank for your triks

Anonymous said...

your script doesnot select value of dropdown by press from keyboard. BIGGEST bug in every jquery dropdown. Well a nice product.
Do you fix it????

kursus website said...

thank you for sharing about jquery with me.

Anonymous said...

thank you:))

Shiwani Jayaswal said...

Very nice...........

Shiwani Jayaswal said...

very nice..................
Thanks

Anonymous said...

Very good code :P Thank you.

Anonymous said...

good work

Anonymous said...

Hi all, please understand the code this nice man has given and try to make it better. Copy-Paste will help you just once. Learn and you will be the best!

Anonymous said...

this is a good example. Perhaps one of the better (if not best) example i've come across on the internet. Thanks, much appreciated.

Deval Khandelwal said...

That was WOWSOME! It was really what I was searching. Keep it Up! & continue to write such awesome posts!

Wilfried KOFFI said...

Thx man. that a great script for beginners. very helpful!!!

Anonymous said...

perfect.
thank you

Anonymous said...

Greatx

bocahblogs.com said...

Very good code
thank you

ifeathern said...

hey buddy thanks.is it possible add a sub menu?

Anonymous said...

Awesome Thanks !

Anonymous said...

Thank u...excellent work!!! Can u help me for a box comment in my PhoheGap windows 7 phone which I can use Jquery prepend...without fetching from the DB.....Thank u once again!

Alamat Dealer Nissan said...

I was looking for crucial information on this subject.Thanks for taking the time to discuss this

Anonymous said...

ID's should never begin with a number... bad HTML

Amy Samuel said...

Hi there Srinivas. Im so grateful for you posting this but I need a littel help.. I have emailed you. Would you mind taking a look for me? much appreciate. amyjo

Juan Camaney said...

hello my dear friend, i found an error in your code, it's not really a problem, but in my situation it is, look. and the follow code check the ";"

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
">< /script>;

if you can see the ";" was my problem cause show it in my navegator, but thanks , haha i dont speak english sr

Anonymous said...

nice

abhishek rana said...

how to make it work like dropdown, ie, when user presses a key, that option should get seleced

Kasidit Phuttawajana said...

Good

Nityananda Maity said...

Very helpful

Anonymous said...

Great concise, easy to understand demo for newbies to Jquery. Thanks for posting. I may even start to like javascript..

ozumaki said...

Nice work, It saved my day

Shaqib Lallmamode said...

Thank for the code.

mambycamara said...

Great! Thank you

Anonymous said...

I love you.

Kiran said...

Nice information Thanks for sharing your thoughts, I have searched for this type of menu but not getting properly from others.

Pascal Msoka said...

I love this

berbagi cerita pengalaman said...

trims for your triks .....

pixy said...

can you teach whether how to make it dynamic using php-mysql ? with submenus upto 3 levels ot more?

Anonymous said...

good tutorial...nice work man..keep it up..
if u use toggle then it make more easy...friend

dhanapal as said...

i'll use this in my code.... thank you..

sanjay kumar said...

Your Post is too good, but this code is not working in my website, what could be problem in my code?

Anonymous said...

thank you very much. nice tutorial

Anonymous said...

Thanks for the code

Anonymous said...

thanks a lot..........

Post a Comment