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 :
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
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:
You’re my hero of the day. Made my day ๐
ReplyDelete
That’s what I was looking for. Thanks a ton..
ReplyDelete
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
I really needed something like this so thank you ๐
ReplyDelete
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
I was searching it since 2 months , Thanks my dear Brothre
ReplyDelete
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
@ Mohammed – Thanks for the heads up i missed that !
ReplyDelete
@ paul
with pleasure.
can you help me about your image “admin” for your comment!
thanks for every thing
ReplyDelete
Thanks Paul. I love jQuery powered features.
ReplyDelete
Thanks Paul i was looking for this
ReplyDelete
Hey Paul….it’s Nice buddy….but i am Having a problem….sub menu’s aren’t working actually…can you help me….:)
ReplyDelete
@ 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
i Have done everything….i am using blogger default template….check my blog…may be there’s some other reason…:)
ReplyDelete
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
@ 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
Thanks……………
but post it as soon as possible….
i am also unable to find that on google, so plzzzzz post fast…
ReplyDelete
Hey paul can you say me how to change the size of this ????
ReplyDelete
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
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
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
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
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
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
@ 20blogg – That is quiet cool i have bookmarked it and will take another look later.
ReplyDelete
@ Dusti – What version of IE did you try it in ?
ReplyDelete
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
I tried it in IE 9
ReplyDelete
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
thanks a lot man..
i already installed it on http://fileservelabs.blogspot.com/ and it works very fine..
ReplyDelete
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
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
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
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
This comment has been removed by the author.
ReplyDelete
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
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
jquery scripts blocked other scripts…. what can i do ???
ReplyDelete
What happened to the menu, it isn’t even working 100% on your example page.
ReplyDelete
Replies
Jaime i checked the tutorial and it seems fine, what error are you seeeing…
Delete
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
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
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
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
thanks so much for this.. could you help me with one thing? i can not seem to center it.
ReplyDelete
Can Google Fonts be used with this nav bar???? If so can you tell me how!~ ๐
Thanks!
ReplyDelete