Simple Drop Down Menu with Jquery and CSS
Wall Script
Wall Script
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;
}
web notification

140 comments:

  1. wow its awesome thnxx for code

    ReplyDelete
  2. 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
  3. Very good script, congratulations, always creates great posts.

    ReplyDelete
  4. Very nice scripts. Thanks for Sharing.

    ReplyDelete
  5. 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
  6. Thanks for sharing

    ReplyDelete
  7. nice script keep up your goodwork

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

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

    ReplyDelete
  10. 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
  11. not coming properly in IE 7,8,9

    ReplyDelete
  12. Thanks again for the code.
    Excellent!

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

    thks

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

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

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

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

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

    Awesome man

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

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

    ReplyDelete
  21. 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
  22. nice brother... u done excellent job...

    ReplyDelete
  23. 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
  24. wow its awesome thnx for the code

    ReplyDelete
  25. Design of menu is awesome. great work

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

    ReplyDelete
  27. Very nice script

    ReplyDelete
  28. 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
  29. nice script - but how to get the border-radius work with internet-Exlorer

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

    ReplyDelete
  31. Really Very Useful Script for Web Developers.

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

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

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

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

    ReplyDelete
  36. Great tutorial.Thanks for sharing.

    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. nice code tanks for sharing

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

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

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

    ReplyDelete
  44. 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
  45. 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
  46. thank you for sharing about jquery with me.

    ReplyDelete
  47. very nice..................
    Thanks

    ReplyDelete
  48. Very good code :P Thank you.

    ReplyDelete
  49. 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
  50. 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
  51. That was WOWSOME! It was really what I was searching. Keep it Up! & continue to write such awesome posts!

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

    ReplyDelete
  53. Very good code
    thank you

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

    ReplyDelete
  55. Awesome Thanks !

    ReplyDelete
  56. 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
  57. I was looking for crucial information on this subject.Thanks for taking the time to discuss this

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

    ReplyDelete
  59. 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
  60. 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
  61. how to make it work like dropdown, ie, when user presses a key, that option should get seleced

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

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

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

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

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

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

    ReplyDelete
  68. thank you very much. nice tutorial

    ReplyDelete
  69. Thanks for the code

    ReplyDelete
  70. thanks a lot..........

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

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

    ReplyDelete
  73. 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
  74. nice script

    is this script can also doing a multilevel submenu?

    ReplyDelete
  75. Thank you very much for this amazing thing

    ReplyDelete

mailxengine Youtueb channel
Make in India
X