How to add a basic dropdown menu to your blogger powered blog

In this tutorial i will show you how to add a basic dropdown navigation menu to your blogger powered blog so i recommend you create a test blog or download a backup copy of your template before doing anything as i cannot be held responsible if you mess your blog layout up.

for this tutorial i'm going to use the minima template however it should work with most blogger templates once you have your template go to layout > Edit html and paste the following code just before the <div id='content-wrapper'>


<div id='nav'>
<ul>
<li class='firstchild'><a href='/'>Home</a></li>
<li><a href='#'>About</a>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Link 3a</a></li>
<li><a href='#'>Link 3b</a></li>
</ul>
</li>
<li><a href='#'>Link 4</a>
<ul>
<li><a href='#'>Link 4a</a></li>
<li><a href='#'>Link 4b</a></li>
<li><a href='#'>Link 4c</a></li>
<li><a href='#'>Link 4d</a></li>
</ul>
</li>
<li><a href='#'>Link 5</a></li>
</ul>
</li>

<li><a href='#'>Links</a>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a>
<ul>
<li><a href='#'>Link 4a</a></li>
<li><a href='#'>Link 4b</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='http://www.blogger.com'>Blogger</a>
<ul>
<li><a href='http://help.blogger.com/'>Help Centre</a></li>
<li><a href='http://status.blogger.com/'>Blogger Status</a></li>
</ul>
</li>
</ul>
</div>


if you are not sure where to paste it see this screenshot note you will need to change every # to the actual link for the links to work like i have in the last link list now we are going to add some CSS code for the structure and style of the dropdown menu if you happen to know CSS you can tweak it further to your liking

#nav {
padding:0;
margin:0;
font-family: arial,helvetica,serif;
font-size: 16px;
clear:both;
}
#nav ul {
padding:0;
margin:0;
list-style:none;
line-height:1;
}
#nav a {
display:block;
width:10em;
margin:0;
padding:3px 5px;
color:#58a;
}
#nav a:hover{
text-decoration:none;
color:#fff;
background:#58a;
}
#nav ul li {
float:left;
width:10em;
border-bottom:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-top:1px solid #dcdcdc;
background:#fff;
overflow:hidden;
}
#nav ul li ul li {
border-top:0;
border-left:1px solid #dcdcdc;
}
#nav ul li ul li ul li {
border-top:0;
}
#nav ul li.firstchild{
border-left:1px solid #dcdcdc;
}
#nav ul li ul {
position: absolute;
margin:1px 0 0 -1px;
width:10em;
left:-999em;
}
#nav ul li ul ul {
margin:-23px 0 0 160px;
border-top:1px solid #dcdcdc;
}
#nav ul li:hover ul ul,
#nav ul li.sfhover ul ul {
left:-999em;
}
#nav ul li:hover ul,
#nav ul li li:hover ul,
#nav ul li.sfhover ul,
#nav ul li li.sfhover ul {
left:auto;
}


since IE 6 and 7 do not support the :hover pseudo-selector for non-links this will not work unless we add a small javascript thanks to htmldog for the script so go ahead and add the following script just before the closing </head> tag



<script type='text/javascript'>
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover"; }
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>


now you should have a basic dropdown menu see my result thanks for reading your comments are welcome.

33 Responses to “How to add a basic dropdown menu to your blogger powered blog”

For some reason the drop downs when I hover over the link are hidden behind my sidebars and my main wrapper. Can you help me?

@Anonymous
what is the url of the site ?

My article is about same theme but with use of more powerful jQuery drop down multi level menu Superfish. Click on link to find out more.

And you have div size problem when users publish comment on you blog on Firefox.

@Mark
what div size problem are you seeing ? because i'm using firefox and i can't see any problem

You have an awesome blog! I have linked your blog to my blog http://blogger-templates123.blogspot.com

awesome! thanks. best script ever

thanks, whats the code to stop the bar from moving. i have split my header into 2 colums, so the drop down menu is up in the header. i want it above posts. any help?

@Rabih
the navigation is already above your posts

How do you change the background color?

how to increase the width??? as u can see on my blog, the last part is broken (i want it to go till the end).

@Anonymous
look for the following CSS code

#nav ul li {
float:left;
width:10em;
border-bottom:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-top:1px solid #dcdcdc;
background:#fff;
overflow:hidden;
}

change the hex colour code on the background property for example

#nav ul li {
float:left;
width:10em;
border-bottom:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-top:1px solid #dcdcdc;
background:#f00;
overflow:hidden;
}

in the example CSS above i used #f00 which is a red colour have a look at this link for colour hex codes

@rabih
that is left to the reader to modify the CSS code to suit their site

http://megatrend-analysis.blogspot.com/search/label/News

the text goes behind the widget! any ideas how to fix it. i really love ur script, but for some reason it keeps going wrong with me. i will be launching my website by the beginning of the year, and i want it to be ready. i will add your website on my fav links. plz help!

Thanks Lawny!
I know this sounds silly but, do you know how to change the text color?

@Rabih
sorry i don't have time


@Anonymous
look for the following CSS code

#nav a {
display:block;
width:10em;
margin:0;
padding:3px 5px;
color:#58a;
}

change the color property example

#nav a {
display:block;
width:10em;
margin:0;
padding:3px 5px;
color:#f00;
}

in the example above i change the text to a red colour

Rabih,
To increase the width, look for this line:

}
#nav ul li {
float:left;
width:10em;
border-bottom:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-top:1px solid #dcdcdc;
background:#2e1a11;
overflow:hidden;
}

Change the 10 before the EM part to whatever number you want. (The lower the number, the shorter the width)

Hey guys,

Can you help me create subcategories on my drop down menu? I have too many players under the "Our Players" category (I have a soccer site) and I would like to divide them in "goalkeepers, defenders, midfielders, and forwards". Is that possible? How do I do it?

My email address: jmburgos@isoccerconsultants.com

@Jose
yes it is possible however you would need to hard code all the links in the dropdown menu and i don't have time to show you how to

hello, this is a great and very useful but the drop-down menu is hidden by my posts and widgets.

It actually even fades out the links that are behind my posts and the ones that are not that low in the page work and seem normal.

Can you tell me what I have to change in order to make it "Always on TOP" ?

Thank you in advance

this is my blog:
http://music4odyssey.blogspot.com/

@Alex
it looks ok to me what browser are you using ?

Is there a way to make this work with Blogger's Pages navigation?

In the first case, am not finding the line "div id='content-wrapper" in my Edit HTML section. How to go about now?pls help

hey text is appering behind widget .plz do u hav css for that .......plz i lke this as it is simple yet efficient but it it always going behind

hey my menu goes back of the posts image..

how can i make it correct

Did anyone solve the issue with the drop down menu going behind the content area or sidebars

How do I get the URL for the sub pages since Blogger only permits us to set up 10 pages?

@Cyn
you have to copy the links and hard code them into the template

Hello! Thanks so much for this tutorial! I have been trying and trying, but I can not get it to work, and I am not sure what I am doing wrong. I haven't tried to customize it yet, just purely copy and pasting from above, and on my test blog you can see what I get. http://designsbyjenn-testblog.blogspot.com/ Any idea what I might be doing wrong? I am new to this, but I am using the Minima template. Thanks so much!

Thank you very much! I was looking for a simple drop-down menu to start and work on it by myself. This is perfect and it's beautiful.

Thanks for sharing.... I'll try it...

For all the users that are having an issue with displaying the drop down menu after implementing this code. Try adding z-index values to the different levels of the menu:

}
#nav a:hover{
text-decoration:none;
z-index:2;
color:#fff;
background:#58a;
}

This specifies what part of the webpage is 'on-top'. The higher the z-index, then the higher order the html item is (the more on top). So with all your menus in the CSS code, add a z-index value higher than the default (which I believe = 1).

@Rachel
You are correct the z-index property specifies the stack order of an element.

:) many thanks for sharing .....i've try this and works perfectly for me ....

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2012 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger