A Simple jQuery Powered Drop Down Menu For Blogger

Posted : Friday, July 01, 2011 | Post Author : Paul Crowe | 46 comments

I have had a lot of requests for a tutorial on creating a simple easy to use drop down menu for Blogger.There are literally thousands of drop down menus around with different styles and functions.However i want to have something that is easy to implement,add links to and Customizable.The menu i choose has all these features, a clean design with a jQuery powered drop down effect.

In the end i decided to go with a menu first published on Blogger Stop over two years ago.I simply made some small changes so it will work on the newer Template designer templates.I also added a z-index so the drop down will display over content and some Rounded corners that will be visible on browsers that support them such as Firefox, Chrome and Safari, you can see a live demo below :

View Demo Button

Add The Simple Drop Down Menu To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<!–start drop menu–>
<style type=’text/css’>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;

background: #0033CC; /*MENU MAIN BACKGROUND COLOR*/

-moz-border-radius: 6px;-webkit-border-radius: 6px;

padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;

color: #EAFFED; /*MENU LINK COLOR*/

white-space: nowrap}

#jsddm li a:hover
{ background: #24313C /*MENU HOVER BACKGROUND COLOR*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
z-index:100;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;

background: #BFCFFE; /*MENU DROP DOWN BACKGROUND COLOR*/

color: #24313C /*MENU DROP DOWN LINK COLOR*/

}

#jsddm li ul li a:hover
{ background: #809FFE /*MENU DROP DOWN HOVER BACKGROUND COLOR*/}
</style>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(‘ul’).eq(0).css(‘visibility’, ‘visible’);}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(‘visibility’, ‘hidden’);}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $(‘#jsddm > li’).bind(‘mouseover’, jsddm_open);
$(‘#jsddm > li’).bind(‘mouseout’, jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!–end menu code–>

Note – In yellow i have highlighted the colors used, you can change these by using a different color code.You can find the code for the colors you want with our html color code generator.

Note 2. – If the rounded corners are not to your liking remove the two sections highlighted in red and there gone !

Step 4. Save Your Template.

That’s the Css and jQuery added next step is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here – Add Full Width Cross Column Gadgets To Blogger.

Add The Menu Html

In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<ul id=”jsddm”>
<li><a href=”/”>Home</a>
<li><a href=”#”>Link One</a>
<ul>
<li><a href=”#”>Link One Sub</a></li>
<li><a href=”#”>Link One Sub</a></li>
<li><a href=”#”>Link One Sub</a></li>
</ul>
</li>
<li><a href=”#”>Link Two</a>
<ul>
<li><a href=”#”>Link Two Sub</a></li>
<li><a href=”#”>Link Two Sub</a></li>
<li><a href=”#”>Link Two Sub</a></li>
<li><a href=”#”>Link Two Sub</a></li>
<li><a href=”#”>Link Two Sub</a></li>
</ul>
</li>
<li><a href=”#”>Link Three</a></li>
<li><a href=”#”>Link Four</a></li>
<li><a href=”#”>Link Five</a></li>
</li></ul>

This is the code that makes up the menu in the demo.Replace the hash tags (#) with your links and the text with ehhh your text :D.If you want to add more links you can do so in the same way, take a few minutes to look at the layout of the code and you will see how it works.

Template Designer Tabs Fix

If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here – Remove Tabs Css.

Thanks again to BloggerStop for the original, Make sure to Check out more of our Design Tips and jQuery Tips.

Drop Your Comments And Questions Below.

46 comments:

DaniB001July 1, 2011 at 5:40 PM

You’re my hero of the day. Made my day 🙂

ReplyDelete
Satish Raj PathakJuly 1, 2011 at 6:05 PM

That’s what I was looking for. Thanks a ton..

ReplyDelete
umhoangm628July 1, 2011 at 6:31 PM

Hello!

I have been trying to implement a drop down menu for my blog this week, but I am having some problems.

My premade template used some java script to populate my menu, so I had to change the code to look something similar to this posts for it to work. But the problem I have now is that no matter how I apply the CSS to my new code, it doesn’t look the the same as when I use the script. I am trying this on my testblog and was wondering if you had some extra time, I was wondering if you could take a look and see what the problem was?

Thank you for your time,
Michael

ReplyDelete
Duchess GabrielleJuly 1, 2011 at 6:55 PM

I really needed something like this so thank you 🙂

ReplyDelete
DDJuly 1, 2011 at 7:17 PM

this is what i’m waiting for thnX for posting you can find link to this post in http://h4wifes.blogspot.com/ just now I have kept it. I fyou do not wish to see your link on my blog plz inform me.
I love your blog very much.

ReplyDelete
Urdu Movies TeamJuly 2, 2011 at 4:03 AM

I was searching it since 2 months , Thanks my dear Brothre

ReplyDelete
mohammed glalJuly 2, 2011 at 2:14 PM

thx paul but there is an error
at remove this code

-moz-border-radius: 6px;-webkit-border-radius: 6px;}

we must not remove }
change red color form it 🙂

ReplyDelete
Paul CroweJuly 2, 2011 at 2:26 PM

@ Mohammed – Thanks for the heads up i missed that !

ReplyDelete
mohammed glalJuly 2, 2011 at 8:53 PM

@ paul
with pleasure.
can you help me about your image “admin” for your comment!
thanks for every thing

ReplyDelete
fowzieyJuly 3, 2011 at 11:44 AM

Thanks Paul. I love jQuery powered features.

ReplyDelete
suprimJuly 3, 2011 at 10:23 PM

Thanks Paul i was looking for this

ReplyDelete
kanuJuly 4, 2011 at 11:58 AM

Hey Paul….it’s Nice buddy….but i am Having a problem….sub menu’s aren’t working actually…can you help me….:)

ReplyDelete
Paul CroweJuly 4, 2011 at 12:16 PM

@ Kanu – If you added it exactly as shown in the tutorial i can see no reason for it not to work the same as in the demo.

ReplyDelete
kanuJuly 4, 2011 at 12:24 PM

i Have done everything….i am using blogger default template….check my blog…may be there’s some other reason…:)

ReplyDelete
Manish GargJuly 6, 2011 at 2:04 PM

Thanks a lot for this
but can you plzzzzzzz tell me how to add further sub tabs under these sub tabs.
plzzzzzzzzzzz
and thanks for this…..

ReplyDelete
Paul CroweJuly 6, 2011 at 6:27 PM

@ Manish – The script is not set up for a third drop down but i have a menu nearly ready to publish that is extreme and almost limitless.Should be published over the weekend.

ReplyDelete
Manish GargJuly 7, 2011 at 10:47 AM

Thanks……………
but post it as soon as possible….
i am also unable to find that on google, so plzzzzz post fast…

ReplyDelete
alamin (ultrapc1)July 8, 2011 at 9:12 AM

Hey paul can you say me how to change the size of this ????

ReplyDelete
Le salon du Livre de MontmorillonJuly 10, 2011 at 12:47 PM

Thanks a lot for this tutorial, that’s pretty nifty ! However, can you help me with a detail ? I added a padding to the block menu to lower it but the padding widened the space between the sub-menus as well. Do you know how to lower the main menu without lowering the sub-menus ?

Here is the blog I am working on : nicolasblogtest.blogspot.com

Here is the CSS code I need to fix :

#jsddm li a
{ display: block;
background:transparent; /*MENU MAIN BACKGROUND COLOR*/
padding: 15px 12px;
text-decoration: none;
border-right: 0px solid white;
width: 70px;
color: #cccccc; /*MENU LINK COLOR*/
white-space: nowrap}

Thanks in advance and keep up the good work ! 🙂

Nicolas

ReplyDelete
Self SagacityJuly 14, 2011 at 8:00 AM

Hello, I need help. The drop down menu I created is not working properly, drop down is behind post. No matter where I place it or how I remove the other items. I also watched your video on how to remove tabs, but I don’t have tabs in my template. Anything else I can do? Thanks.

ReplyDelete
VašekJuly 15, 2011 at 10:41 AM

Hello, I would like to kindly ask you – do you know any vertical multilevel menu for Blogger? I saw tens of webs, but none of it was suitable… I would be happy for your help or tips. Thank you very much! Vasek

ReplyDelete
Lasting RoseJuly 22, 2011 at 11:17 AM

Hello Paul,
I have installed this on http://lastingrose.blogspot.com/
However the drop down screens are being hidden under the header bar. Is there a way to ensure they stay on top Where can I allply a property like
Z-Index= 5000 ?

ReplyDelete
DustiJuly 23, 2011 at 5:08 PM

Hi Paul,

I installed the “A Simple jQuery Powered Drop Down Menu For Blogger” and all looks great in Firefox. However, in IE it looks horrid. Please advise. I know I installed it correctly since it does work in Firefox.

Have a great day and thanks for all you do for us.

Dusti

ReplyDelete
20bloggJuly 24, 2011 at 10:12 AM

Hi Paul.

can you pls help how can i add this designchemical.com/lab/jquery-vertical-mega-menu-plugin/getting-started/ to my blog

thanks in advance

ReplyDelete
Paul CroweJuly 24, 2011 at 1:11 PM

@ 20blogg – That is quiet cool i have bookmarked it and will take another look later.

ReplyDelete
Paul CroweJuly 24, 2011 at 1:17 PM

@ Dusti – What version of IE did you try it in ?

ReplyDelete
gümüş hilalJuly 25, 2011 at 6:40 PM

Thank you master, but i’ve question about this. How can i customize the position of titles? For example, one of my title, “spor” seems on the bar just like <-spor——-> but i want to make it <—-spor—->. I hope i can tell my problem 🙂

ReplyDelete
DustiJuly 25, 2011 at 8:19 PM

I tried it in IE 9

ReplyDelete
TheresaJuly 27, 2011 at 4:20 AM

Thank you so much!!! I have been trying to add a drop down menu for days and nothing worked…until I found this!!!!! I can not thank you enough!!!!

ReplyDelete
darkenrahlJuly 27, 2011 at 4:40 PM

thanks a lot man..
i already installed it on http://fileservelabs.blogspot.com/ and it works very fine..

ReplyDelete
GautamJuly 28, 2011 at 4:17 PM

I’m using this on my blog currently, love it!

Just wanted to ask how I can change the color of the link the user clicked so that user will understand he is in which section currently.

The code helps me to change the color when I hover on the link but what I want is once the user clicks on the link the color should remain unchanged for that block.

ReplyDelete
New World PartyJuly 29, 2011 at 10:25 PM

I am using the Awesome template in blogger. The submenu items do not appear. I would assume that they are hidden under the content area of the page. I edited the HTML of the template and deleted any occurence of “z-index”, except for the one in your code. Still, the submenu does not appear.

Do you know how we fix this?

ReplyDelete
EmilyJuly 30, 2011 at 6:16 AM

Worked perfectly, and it was so easy to install- I just used it on a blog I did for a client! I usually don’t add nav bars for clients because they are so difficult but this took only a few minutes- you rock!

Thank so so much!

ReplyDelete
stepheyAugust 6, 2011 at 8:18 PM

Works great! I even styled it to my taste and brand, perfect! Thanks! However, the script seems to take a second to load drop down menu. The main links are clickable immediately but the drop down menu only when the whole site has loaded, is there a way to speed it up and get rid of that little lag? Thanks!

ReplyDelete
Gone Sale RackingSeptember 19, 2011 at 9:55 PM

This comment has been removed by the author.

ReplyDelete
JaimeIsBrokenOctober 13, 2011 at 12:34 AM

Hi, I’m sorry I can’t remember your name.

Thanks for this. It worked absolutely fantastic, and it was the style I was looking for. I have modified the code a little bit to better suit my color scheme and text width in the main button. I know it wouldn’t look exactly uniform but I was wondering how the code needs to be modified so that the main tabs also auto adjust their width like the drop down tabs do. I don’t think I will change the way I have it but I am eager to educate myself. I did have to adjust the width of the main tabs from 70px to 100px to prevent text link overflow. Can the code be changed so that the main tabs have a minimum width of 60px but auto adjust to a larger size if the text is a little longer?

I hope that makes sense.

ReplyDelete
Gone Sale RackingOctober 14, 2011 at 3:27 AM

hi,
I deleted my last comment here because I figured out the answer to the question I was asking. Actually, I am having trouble like other people wrote, with internet explorer. The drop down menu list goes behind my main content. It works fine in Firefox though.
Your blog is awesome! thanks.

ReplyDelete
Bhabani PrasadNovember 4, 2011 at 7:42 PM

jquery scripts blocked other scripts…. what can i do ???

ReplyDelete
JaimeMarch 1, 2012 at 7:46 AM

What happened to the menu, it isn’t even working 100% on your example page.

ReplyDelete

Replies
Paul CroweMarch 1, 2012 at 12:17 PM

Jaime i checked the tutorial and it seems fine, what error are you seeeing…

Delete
AnonymousMarch 15, 2012 at 9:21 PM

I mean look on you example page and do you see the spaces between the drop down buttons? I used this menu before and it didn’t have this space. The menu its self shows up and is functional, it is the space between the buttons that drop down that isn’t right.

Delete
AnonymousMarch 15, 2012 at 9:29 PM

It is working right in Internet Explorer, but for some reason it isn’t working right in Chrome. I know it worked correctly in chrome before because I generally always use chrome. This link is a screen capture of what I am seeing using Chrome.
http://i1126.photobucket.com/albums/l602/JaimeBroken/TestBlog707.png

Delete
Reply
SimoneApril 18, 2012 at 8:24 PM

Hi!
I added this the way it is into my blog and it works fine in Firefox but not in IE. In IE the tabs all appear at the right, vertically and the tabs are all mingled together on the left, you can’t click them. So I went in and tried taking out the CSS-Tab part, like you suggested in your video. Now the tabs are correctly aligned in IE, but I can’t click anything! And it doesn’t show the drop-down menu anymore.
What am I doing wrong?

ReplyDelete
Ria D. LaabJune 5, 2012 at 2:51 PM

hmmmm some tabs on the nav bar I installed don’t work/can’t be clicked or hovered. How can that be fixed? Thanks!

ReplyDelete
Chrissy @ Boerman RamblingsAugust 11, 2012 at 7:42 PM

thanks so much for this.. could you help me with one thing? i can not seem to center it.

ReplyDelete
EmilyDecember 18, 2012 at 4:49 AM

Can Google Fonts be used with this nav bar???? If so can you tell me how!~ 😉

Thanks!

ReplyDelete