Simple Drop Down Menu with Jquery and CSS
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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


144 comments:

  1. 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();
    });

    });

    ReplyDelete
  2. Very good script, congratulations, always creates great posts.

    ReplyDelete
  3. Very nice scripts. Thanks for Sharing.

    ReplyDelete
  4. 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

    ReplyDelete
  5. Thanks for sharing

    ReplyDelete
  6. nice script keep up your goodwork

    ReplyDelete
  7. Thanks, impressive script and inspiring piece of code.

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

    ReplyDelete
  9. 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.

    ReplyDelete
  10. not coming properly in IE 7,8,9

    ReplyDelete
  11. Thanks again for the code.
    Excellent!

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

    thks

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

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

    ReplyDelete
  15. Nice drop down menu. Thanks for this post.

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

    ReplyDelete
  17. veerendra raghuvanshiJune 21, 2012 at 2:25 AM

    Awesome man

    ReplyDelete
  18. You have really nice blog....nice script

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

    ReplyDelete
  20. 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

    ReplyDelete
  21. nice brother... u done excellent job...

    ReplyDelete
  22. 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.

    ReplyDelete
  23. wow its awesome thnx for the code

    ReplyDelete
  24. Design of menu is awesome. great work

    ReplyDelete
  25. Great Script. Will be using in the future

    ReplyDelete
  26. Very nice script

    ReplyDelete
  27. 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);
    });

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

    ReplyDelete
  29. Very good script, congratulations, always creates great posts.

    ReplyDelete
  30. Really Very Useful Script for Web Developers.

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

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

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

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

    ReplyDelete
  35. Great tutorial.Thanks for sharing.

    ReplyDelete
  36. Nice! good work...

    ReplyDelete
  37. good post.. nice to work out..

    ReplyDelete
  38. 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

    ReplyDelete
  39. 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.

    ReplyDelete
  40. how i can make it in multiple div ?

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

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

    ReplyDelete
  43. 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?

    ReplyDelete
  44. 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????

    ReplyDelete
  45. thank you for sharing about jquery with me.

    ReplyDelete
  46. Very good code :P Thank you.

    ReplyDelete
  47. 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!

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

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

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

    ReplyDelete
  51. perfect.
    thank you

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

    ReplyDelete
  53. Awesome Thanks !

    ReplyDelete
  54. 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!

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

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

    ReplyDelete
  57. 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

    ReplyDelete
  58. 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

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

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

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

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

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

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

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

    ReplyDelete
  66. thank you very much. nice tutorial

    ReplyDelete
  67. Thanks for the code

    ReplyDelete
  68. thanks a lot..........

    ReplyDelete
  69. Very nice
    Thanks for sharing!!!

    ReplyDelete
  70. Thanks for sharing i was looking for it.....

    ReplyDelete
  71. can u make it scrolling with multi dropdowns?

    ReplyDelete
  72. Hi I have a doubt,I am dynamically generating hyperlink in jquery on button click,Values to displayed as submenu to button.how can in do?

    ReplyDelete
  73. nice script

    is this script can also doing a multilevel submenu?

    ReplyDelete
  74. Thank you very much for this amazing thing

    ReplyDelete

Make in India