Try Advanced Blogger Templates Search >> 
Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.
Add Beautiful Drop-Down Menu For Blogger
Recently a lot of my loyal visitors asked me about the ability to add an easy and beautiful drop-down menu for blogger,
So today we will learn how to add a drop down menu for blogger and a very easy way,
This menu is compatible with most of modern and classic browsers, and can be added for any template in only 3 steps,
but please remember,
Don’t forget to backup your current blogger template, ( by downloading it )
Go to your blogger account,
Navigate to Dashboard >> Design >> Edit Html >
And find the following code,
]]></b:skin>
And before it, add the following css code,
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}
2. Adding the Java codes
At the same page, find the next code,
</head>
Then add this code exactly before it,
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').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>
Now Click Save Template
3. Adding The Menu To Your Blog
Now Go to your Dashboard >> Design >>
And on your page elements page, click on Add A Gadget any where on the screen,
And choose ” HTML / JavaScript ” , Leave the title empty, ant at the content area, paste the following code,
<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Drop 1-1</a></li> <li><a href="#">Drop 1-2</a></li> <li><a href="#">Drop 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Drop 3-1</a></li> <li><a href="#">Drop 3-2</a></li> <li><a href="#">Drop 3-3</a></li> <li><a href="#">Drop 3-4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">AllBlogTools</a></li> </li></ul>
And click Save
Now, it’s important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or footer, just drag it to your page header or above your posts area, and click And click Save again,
Now go to view your blog and enjoy your new blogger drop-down menu.
Note : In step 3, you must change the menu titles and replace all # letters by the right menu url.
Demo
To view a live demo for this menu, please click here,
All you comments are welcome.
Related Tricks & Tutorials
About The Author
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here
ITS VERY NICE – THANK YOU
Sip bos, template yang gue pakai mo tak kasih ini
Great!!! :==)
Its beautiful. Thx
I really like it! Thanx!
However I do have a little problem. My drop-downw hide behind the wrapper and the first post.
How could I fix it?
me too drop down is hiding behind head wrapper what to do plz help
Sorry But this error looks to be happen only with official ” blogger templates designer ” templates, I wish i’ll release another improved tutorial or update this tutorial soon
Well all you do is delete all the CSS in the template in the “Tabs” section.
I am having the same problem as Olivia and vineet.
hi susan, we are working on this and will solve it soon.
to view it, you have to write the 3-4 times or much more as you want below the code in you gadget.
Here is the code:
i dont get how this fixes it…
why rel=nofollow” ?
Thanks Benyamin
great looks and easy to install … but … same problem as above. drop down sections get ‘cut off’ … see demo http://oobble.blogspot.com/
please fix it
as would love to use this on several blogs.
also if you can explain how to change colours of font and buttons that would be v appreciated.
cheers
Sorry doc, But this error looks to be happen only with official ” blogger templates designer ” templates, I wish i’ll release another improved tutorial or update this tutorial soon, As you can see it working perfectly in the demo blog coz I use a custom template.
Love the menu but having the same problem as everyone else. Hoping for a solution soon!
Thank you for your valuable article…
A Im newbie, A menu that my desire to blog simpaku but on the top navbar appears code step one (1. Add the Menu CSS) of course this is not pleasant in look, I’ve tried to click the Expand Widget Templates and does not click but the result remained the same , so I hope you can improve step by step, thanks for the answer.
I mean why step 1. Add The Menu CSS
appears above the navbar?, thank you.
Do you mean that the code in step 1 appear in your blog for your visitors, If yes, so you must paste it in a wrong place.
Hi! This is great..I’m trying to figure out how to do this since I started my blog 3 years ago..Ok, I tried once, failed, and never tried again!
I’m just starting to play around with the Menu buttons, and so far I havn’t had any probelms but I was wondering….
Can the buttons be customized (ie, color font)?
Hi April, sure it can be customized, you just want to know a little info about the css. if you need any specific help, please let me know.
any way, this is not a perfect tutorial, i will post another better tutorial here soon.
Hi Max,
Great tutorial. I followed the steps on creating navigation bars. I was able to create and even change the titles. But some refused to change and instead new ones were popping up. You may have a lookhttp://workmymarriage.blogspot.com/ and help me fix it as I want to start the blog soon. I also want to follow the drop down menu. Can the two steps be synchronized as it appears the codes are to be inserted at the same points in the two lessons.
Thanks for your help.
very nice, thanks
Hi Max! first of all thank you for this post, it sure is helpful. however i need more help, i’m just ccs confused and i wanted to change the color and probably put an icon before the title. Any feedback will be greatly appreciated. thank you
hi all i want to use this drop down menu. but i can not add it to my blogger html, and i can not find these etc so please help me to find it?
thanks doc for your helpful post, managed to put the drop down menu in my blog but i faced similar minor case the drop down menu is hiding
thanks. but how can i work with menu. How can i manage my blog level into menu bar.
Didn’t work. No bar, no design, all links are vertical, not horizontal.
Same problem.
thanks dude …
This is an excellent post. I have decided to use this drop down menu on my site. I have two issues maybe you can help. I am having one of the same issues as the above users, my drop down menu falls behind my post area, I have tried to max out the z-index. I have also tried to relocate the code in different areas, I have also tried to add the z-index to different areas I have all tried to delete the relative positioning, all with no success. Another issue I am having is the dots that are between each menu item. Please look at my site http://www.custo-minz.com. Thank you!!!
how do i change the menu titles and replace # letters by the right url?
Please do see some navigation menu’s in my blog http://www.paulsantosh.com/search/label/navigation%20menu
please………….
Hi there., i have tried all the steps you had given above. but unfortunately it does not work fine for me.
please can yo help me
the web site is http://www.bhtj.blogspot.com
your immediate response will be highly appreciated.
Hi Max, thanks for the awesome tutorial! I was wondering how I can further customize this menu. I’m not too familiar with css. I would like to change the hover color of the text (not the background) as well as change the color of visited links. Please help. Thanks
HI
I am thinking to show all my blog labels in a drop down menu, How Can I do it ? can You please assist me??
Hello, I think this site is very interesting article, I like it very much…
Great!! Thanx!!
You are awesome guy!
thank you dear.
it’s working great, thanks MAX!
I love u:D
Thanks a lot Maxie
I’m so thankful to you.
thank you so much ^^
Hi there,
Is there a fix yet for the drop down menus appearing behind the page template? Also, I am wanting this drop down menu to replace my current ‘pages’ links at the top. Can you hide the pages from view but keep them invisible so we can use the url. Here’s what I’m wanting: When we replace the ‘#’ symbol with a URL can we have it link back to a different ‘page’ on our blog (even though I want the original ‘page’ tabs to be hidden). Thanks.
thank’s this info
i have always loved dropdown menu… thanks for the tutorial..
i will try it though i have been trying to many widget in my blog but it’s seem is not working. Please take a look and give me a suggestion on how to add this menue at http://www.billgatesguide.blogspot.com Thanks for ur assistance
still wondering how possible you can help me out. i will try it though i have been trying to many widget in my blog but it’s seem is not working. Please take a look and give me a suggestion on how to add this menue at http://www.billgatesguide.blogspot.com Thanks for ur assistance
Amazing site with good information keep the good job.
Ok so I think that I did everything correct except for the last part where it states “Note : In step 3, you must change the menu titles and replace all # letters by the right menu url”.
I was able to change the menu titles to whatever I wanted but am not sure what you mean by the last part “replace all #’s by the right menu url” what am I supposed to be replacing those numbers with??? Please help, I am blogging with blogger and no idea what to do from here thanks
i try doing it but it comes out messed up! plz make a video tutorial!
nice,,,thanks
Hi,
I also have problems with the drop down. The submenu’s are not visible. Hope you can come up with the fix.
http://myonethirdbrain.blogspot.com/
By the way, thank you for your other tutorials,
I was able to show sub-menus in blogger..
here’s my link http://manishseraph.blogspot.com/
u can check.. I just moved it upward
Amazing!! Thanks Max
Yes!
I finally had this working!
This is a great article.
Bookmarked!
Thanks man.
This is really nice and i have tried it at http://www.googlemillionaires.blogspot.com and i can not figure out how to do it. I think the code part of it is the problem of where to place the code.
Hope to try it again. Thanks for your wonderful info here and i pray you keep it up.
Cheer..
Thanks this information and hope to try it but can you take a look at http://www.insurancemoneyonline.blogspot.com and will its still work there for me. Hope to try it. Thanks for your info here. You really do a nice jobs.
Wish You Long Life
i too am stuck with how to change the names in step 3…the drop down bar is showing and working but i want to add my own labels to each one….how do i do that…thanks
sorry second reponse…i put in the wrong site….now here is my question
i too am stuck with how to change the names in step 3…the drop down bar is showing and working but i want to add my own labels to each one….how do i do that…thanks
I follow all the steps, and it does not working.
Please clarify step 3 Note which is,
“Note : In step 3, you must change the menu titles and replace all # letters by the right menu url.”
thx brada, so cool
would love to get a fix for the dropdown boxes hidden behind the posts. Seems to be resolved only if you post the code within a post itself.
I was just wondering…how can I change the appearance of the boxes so it’ll be more cohesive with my design blog. Thanks! This really helped a lot!
how to change the buttons style?? thx
hi dude..nice share but how to apply the same for pages element drop down menu please check my site and reply http://www.getsoft.blogspot.com
waiting for a quick reply
HI Max,
You always bring good stuff for us.
This one was good but I always expect better every time you post something new.
I have created Professional Drop Down called Green Nature drop down Menu @ http://blogshippo.blogspot.com/2011/09/how-to-make-css-drop-down-menu-bar.html
I would appreciate if you can take a look and drop your valuable comments.
Dear admin,
I have tried your this post to add menu+submenubar to my blogspot. But I am not successful completely, because in my blogspot MAIN MENU is ok but drop-down menu doesn’t show properly. Here is my blogspot link>>>http://mukut-blogopedia.blogspot.com
how can I fix it? Help me please
We’re all having this problem. It works if you put it above the blog section instead of under the heading. I don’t like it there, but it works, so I’m leaving it there until Admin can fix the problem…
Thanks for reply. If I use it in left or right sidebar, then it works perfectly, but couldn’t work properly if I placed in top of BLOG POST. Hope it will be fix soon and I will get a solution. thanks
Dear Haley,
How can I put this code above the BLOG SECTION? Would you please explain?
thank’s this info
why did my drop down menu hidden behind the post frame when i put it on top of my page?but it works perfectly when i put it at the footer..
Thank’s ,,,Nice Info
Dear Mr,
It is not drop-down menu list. I embedded your code exactly u said but my website’s menu is only single list.
this is great.. after change template my old menu gone, now i will get the new one… XD
I already installed that drop down menu on my blog http://sitepress.blogspot.com but it doesn’t work well… all menu link that I input show up, but the link on drop down menu only work for 2-3 link… and all link below 2nd or 3rd link/row can’t be clicked because it will disappear when cursor pointed to that link…
Thanks! Works great so far with two links.
Thank you!
now my blog look more professional
Great tutorial and thanks for sharing this!
I can’t figure out what I’m doing wrong: I’ve followed each step, but the “drop-down” menu isn’t dropping down and it’s not horizontal. Argh! Would you advise? Thanks so very much!!
This is a nice widget for blogger..looks beautiful..thanks
Thanks Dear, but i want to change the colors of preloaded Menus. Can you please tell me how can i do that.
Wiki For You
Hey, did you already find a solution for the Problem with the appearance behind the post area?
Hey here, i found a solution for the Problem, don’t know if it works every time.
So in the css code is the first part:
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
you have to add two things, the height an an overflow option.
#jsddm {
height: 50px;
margin: 0;
overflow: visible;
padding: 15px;
position: relative;
z-index: 2;
}
Awesome!!! thanks so much for the fix info!
Please fix my blog, I already input your code but dropdown doesnot show all
Hi Max,
It works.Thanks.
But how do I add my post to the drop down menu?
Thanks To Your Tutorial …
and i’am waiting to new post from you
Thanks for the tutorial, it works great on my blog http://www.spotifyclassical.com/ But if I add all of the entries into the menu it would be too long (and I do want to list all the composers and other playlists on my site). I wonder if you can share the code of the menu used in your site? Thanks.
TQ Max, I got a problem how to link my pages to the drop down menus?
I have been searching for a drop-down menu that would work well on blogger, this is perfect! Very easy to add and customize; I was done in five minutes. Thanks so much for posting this!
Search bot harder to get to the content on the page.
It is better to copy the styles into a separate file.
Important for Russia.
Hi Max,
Thank you!! This is a great tutorial – one question: how can I modify the drop down font & colors? I was able to modify the main tab font and color but not the drop down i.e. Drop 1-1, Drop 2-2 etc
Thank you for your help!!
thank you so much for the great tutorial..
Hi
Its very nice but i am also having the same problem like others that drop down menu hides in the template. Can you fix it?
Thanks
Regarding the drop down menu cutted off in official blogger templates I found a solution here:
http://falsinsoft.blogspot.com/2011/11/drop-down-menu-in-blogger-template.html
Hope that could be useful to all
That website worked! Thanks!
I have a nice drop down menu now. It was hiding too, so I did what K-ro said and it works great. I even change the blue colour for a grey and add more tabs. If you want to have a look go to: http://gadgetalkabout.blogspot.com I didn’t know nothing about code before. Great Tutorial. Thanks
Correction, it doesn’t work with internet Explorer. Any solution? But it does work with safari. Why?
how would i go about changing the color on on this drop down menue
Thank You so much for the Tutorial!
I too was having problems with the drop down menu hiding behind the post page. I was ready everyone’s comment as well and some people was having the same problems, because I was using the blogger templates.
I stumbled across K-ro comment (he had the solution).
I did exactly what K-ro said in his comment and now its fixed!!
Here is what you have to do for those that are still stuck:
-Go to Design> Template Desinger> Advanced> Scroll down until you see Add CSS
-So in the css code is the first part:
(Copy and past this code)
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
-You would now have to add two things, ADD the HEIGHT an an OVERFLOW: VISIBLE. (Look at the example below)
#jsddm {
height: 50px;
margin: 0;
overflow: visible;
padding: 15px;
position: relative;
z-index: 1000000000;
}
And then your set!! Hope this Help, because it Definitely helped me
Hi, it’s great, but I am using Picture Window and the drop downs go behind the panel. What should I do? Thanks so much for any help.
Josa
sorry see answer above, thanks everyone
Still not working for me. Moving the page down does not look good. Have had to do without. If anyone else comes up with a fix, please post. Thanks.
IT really helped me Thanks.
it really work
Hi, this code really work in my blog y really like it.
But I want to know if i can create a sub menu under a sub menu.
Something like this
Menu
*Drop 1-1
*Drop 1-2
-Sub drop 1-1
-Sub drop 1-2
*Drop 1-3
yeah how about some sub menu
I have tried to fix the drop down menu from hiding behind the post area. But I can’t seem to get it to work. Any help would be appreciated.
TabascoPeppers@gmail.com
@pril
Hi there,
Thank you for this great post. However, could you please guide me how do I make a fixed “width” for the buttons. I mean all of them should have the same width. I tried to change “width: auto;” with “width: 170px;” also “width: 100%;” but all of it did not work.
Looking forward to hear from you. Thank you in advance.
Regards,
Mua
Hi!
Thanks for all the instruction. I have add the menu on my blog BUT I dont know how to change the menu title and replace all letters by the right menu url.
I have to find the URL of each title and add it to link the title to menu? How I will find the URL and how I am going to add it on the menu?Could you please give me step by step the way to complete my menu?
Many Thanks
NIce one .. it works fine for me… simple and best
Keren
This is really an interesting post as you help you to understand the logic of adding menu to the blogger. I have tried this for some time now. But i’m here here for your complete secret and guide. This will help to increase the impression on the site as it’s keep the visitors busy with the blog and also beautify blog making it a professional. But i don’t know if this same format will work at http://www.strictlyfreebies.com as it is design in wordpress. keep it up
Hi Bro,
It does not working for me…not sure where is the problem..hoe you can help…
Very nice indeed, thank you
It worked after i tried K-Lo’s solution. but i’m not sure i like the Gap between post.
Will try to figure it out and remove the gabs.. other than that.. it works great
this js not working: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
please help!!
My dropdown menu dosnt work. The links get highlighted when I hover over them, but the dropdown menu dosnt come down
Really a wonderful how to for all the users of blogger. Looking forward for more useful tips…….
hello sir
how are you.sir how can create label drop down menu in my blogger site.please sir help me
Let me know if you need something like this blog http://spicecheck.blogspot.com/ or your needs are specific to label drop down.
I tried your dropdown menu but it increased my site load time. Now I’m using the one shown on this blog (http://spicecheck.blogspot.com/). If anyone needs code for this reply me. I’m not sure if i can paste code here.
Hey Mint I like what your drop downs. What code did you use? Thank you.
Hey Mint, like your drop down. Please help with the code.
Смотреть онлайн турецкие сериалы с переводом на русский язык
На шаг впереди gold-nm.ru
Hi….buddy.
i like ur dd and i apply this to my template.
the dd is showing but unfortunately dd is not working
plz help
hi……i sucessfully i added the dd,
but it not working, the dd doesnt come down…
plz help
I’ve been playing around with this. The problem i have is that now the height is 50Px it only allows for 1 sub link.
so heres another fix you can apply.
Got to Template Design and advance then add ccs and look for:
#jsddm {
margin: 0;
overflow: visible;
position: relative;
z-index: 1000000000;
}
Then highlight all and replace with:
#jsddm {
height: 125px;
top: -15px;
margin: 0;
overflow: visible;
padding: 15px;
position: relative;
z-index: 1000000000;
}
Then place the Javascrip box (your menu) to below your header. the -top pushes up abit and allows you room for 4 sub links!
How ever, you do have a MASSIVE gab in the middle of your page. so make sure you have an interesting background.
If you dont want a massive gap, you can reduce the “Height” this shorts the gab where sub links are allowed to be showen, how ever it reduces how many you can have.
I advise around 90px Height for 3 sublinks and a smallest gap.
~John Falls~
Correction:
95px for height, for 2 sublinks.
~John Falls~
How to change d colour of menu ?
ITS WORKING BUT THE DROP DOWN WONT VIEW? ITS COVERED BY THE OTHER GADGETS