Friday, 15 May 2009

How to Create Drop Down Navigation Menu With Sub Menu in Blogger


categories : | 82 comments »

Somedays ago, someone ask me about how to create dropdown navigation menu with sub menu like on this blog. To create dropdown navigation menu with sub menu on your template is not too difficult, but because each template is different, whether it is the size of template, Widget placing technique, or anything else, you will need a little adjustment to the code or script given. To make it easy, I use my own source code in this tutorial. You just need to follow the description below and make a little adjustment:

  1. Login to blogger with your ID

  2. Click Layout

  3. Click on Edit HTML

  4. Before you edit your template, I suggest to download it first to anticipate if you make a mistake when editing your template code.

  5. Search For : ]]></b:skin> and add these Css codes. You may need to adjust the width, color, and the url image with yours because the character of each template is different.
  6. /* ----- NAVBAR MENU ----- */
    #NavbarMenu {

    width: 980px;
    height: 35px;
    background:#99C9FF url(http://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif) repeat-x top;
    color: #3D81EE
    margin: 0 auto 0;
    padding: 0;
    font: bold 11px Arial, Tahoma, Verdana;
    border-top: 1px solid #AFAFAF;
    border-bottom: 1px solid #FFFFFF;
    }
    #NavbarMenuleft {
    width: 680px;
    float: left;
    margin: 0;
    padding: 0;
    }
    #nav {
    margin: 0;
    padding: 0;
    }
    #nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
    color: #3D81EE;
    display: block;
    text-transform: capitalize;
    margin: 0;
    padding: 9px 15px 8px;
    font: normal 15px Georgia, Times New Roman;
    }
    #nav li a:hover, #nav li a:active {
    background:#99C9FF;
    color: #3D81EE;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #3D81EE url(http://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif) repeat-x top;
    width: 150px;
    color: #000;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #99C9FF;
    border-left: 1px solid #99C9FF;
    border-right: 1px solid #99C9FF;
    font: normal 14px Georgia, Times New Roman;
    }

    #nav li li a:hover, #nav li li a:active {
    background: #99C9FF;
    color: #3D81EE;
    padding: 7px 10px;
    }
    #nav li {
    float: left;
    padding: 0;
    }
    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
    }
    #nav li ul a {
    width: 140px;
    }
    #nav li ul ul {
    margin: -32px 0 0 171px;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }
    #nav li:hover, #nav li.sfhover {
    position: static;
    }

  7. After that, search for this codes
  8. <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
    </b:section>
    </div>

    And add the below codes after the above codes:
    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'>
    <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/News'>News</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/All%20Software'>Software</a>
    <ul>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Anti%20Virus%20Software'>Antivirus</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Audio%20and%20Video%20Software'>Audio and Video</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Desktop%20Enhancements'>Desktop Enhancements</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Graphic%20and%20Web%20Design'>Graphic and Web Design</a></li>
    <li><a href='#'>Internet</a>
    <ul>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Dial-up%20and%20Connectivity'>Dial-Up n Connectivity</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Internet%20Security%20and%20Spyware'>Security and Spyware</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Internet%20Utilities'>Utilities</a></li>
    </ul>
    </li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/System%20Utilities'>System Tools</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Tools%20and%20Utilities'>Others</a></li>
    </ul>
    </li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Free%20Blogger%20Template'>Template</a>
    <ul>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New Blogger Template</a></li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/Classic%20Blogger%20Template'>Classic Blogger Template</a></li>
    </ul>
    </li>
    <li><a href='http://hyperjadulz.blogspot.com/search/label/TiPs%20and%20TriCk'>Tips and Trick</a></li>
    </ul>
    </div>

    </div> <!-- end navbar -->

  9. Click Preview and Save Template if its working fine. That's it.

Don't forget to change the names and links with yours in above codes.I hope you would like this navigation menu for sure. If you have any question about it, just leave a comments below.


If you like this post, then you should consider to subscribe via RSS Feed or enter your email address below to get new posts sent directly to your inbox

Subscribe to our feed



Comments :

82 comments to “How to Create Drop Down Navigation Menu With Sub Menu in Blogger”

This is great! Works like a charm!

Thanks for posting!

Talk2myCPA said...
on 

Great information..
Already try it on my another blog.
thanks

Anak Torokossik said...
on 

bro please help me i am not able to apply this sub menu but wnt it very urgently please help me out here
http://www.getallprices.blogspot.com/

gannu said...
on 

bro help me out please its really urgent

gannu said...
on 

Talk2myCPA -- no problem,nice to help you.

Anak Torokossik -- thanks,hope you will succes to use this code in yor blog

Gannu -- Hi gannu,what is your problem?hmm.. look like you made some mistake when put the css code in your template. You must change the width because your template width only 766px. and you must put the css code in css section in your template. I suggest you to put the css code below your footer section but before code

--></style> in your template. or you can put it after code

<style id='page-skin-1' type='text/css'>

to make sure that you put the css code in your css section.

d3d3 said...
on 

i have downloaded and applied your magazine 2 template brother its wonderful.. now how can i apply your navigation menu should i do some changes or go ahead with ur above tutorial

thank u in advanse waiting for ur reply

gannu said...
on 

bro i tried everything but the same above problem continues with the new template also please say me when will u be online next time so that with ur help i can make the navigation menu just like u because its just so wonderful..
thank u in advance reply asap.. tc

gannu said...
on 

it's very simple gannu. You just need to change the navbar code in css section with my code in this tutorial. but if you still have a problem,maybe i will update the template so you can easily use the template with navbar like in my blog. usually I online every week end and wednesday or thurstday.

d3d3 said...
on 

bro please tell me the time at what time u'll so that i can talk to u regarding it..

gannu said...
on 

I will online on next Wednesday in afternoon gannu. Why you not leave your email addres so I can send you a tutorial to edit your template. I made a little change to in css code. You can check it at http://templatemagazine2.blogspot.com/

d3d3 said...
on 

here it is buddy ganesh_rathi101@yahoo.co.in

thank u very much buddy

gannu said...
on 

no problem gannu

d3d3 said...
on 
This comment has been removed by the author.
Maria said...
on 

Hello! Thanks for sharing but it was too complicated for my simple web. I need help to create only 1 simple layer but I can't do it even I follow your tutorial. Sorry for that as Im not good with web design at all. Here's my blog : www.beautygalleries.blogspot.com. I just want to add 1 layer below Job Schedule. What should I do???

BG said...
on 

I could use a little help. I did everything as posted (i hope anyways...LOL). And it is showing up as a list that goes down the left side of my blog. Not as tabs that go accross the top. Just wondering if anyone could help figure out the problem and what I may of done wrong. I have an additional make shift nav bar that is a gadget and just a page element. but I dont think that would interfere....but I could be wrong. I did that one when I first started the blog. I didn't want to delete that one until I got this one right. Hmmmm....I'll keep playing with it. Hopefully some can help. Thanks! oh...and my blog so you can see what I'm talking about: www.jodygall.blogspot.com

jody said...
on 

Slash that last comment from me! I figured it out! Awesome! Thank you so much for this tutorial. I've been looking for 2 days for a tutorial I could follow. This one was definitely it!! Just a little bit to common sense with following the codes and bam....I got it! Thank you so much!

jody said...
on 

How do you center this? I have tired deleting all the floats and adding text-align........but nothing

Thank you1

Anonymous said...
on 

BG -- the key to edit the design of your website is on the last part of this tutorial. Just for example, if I want to delete one sub menu in software,I must delete this code :

<li><a href='http://hyperjadulz.blogspot.com/search/label/System%20Utilities'>System Tools</a></li>

If I delete that code, then my System Tools menu will be delete.

Jody -- No problem, Nice to help you.

Anonymous -- Which part do you mean? please tell me more specific about your problems so I can help you to solve your problems. Thanks

d3d3 said...
on 

Hey there - what I mean is how do I center the entire menu with my outer wrapper? It all goes to the left.

Kimberly said...
on 

Kimberly -- After I check your source code, finally I've got the point. Just go to your css code in your template about outer wrapper and then change the text-align:left; into text-align:center;

d3d3 said...
on 

Its a marvelous post. The dimension of the template will be more colorful by adding this

Ahsan said...
on 

hi bro,
how about to create vertical submenu on blogger??
newbie here...

many thanks

Bekasi Supra said...
on 

It`s just what I need! Thnaks!

Michael said...
on 

It's just what I need but i can't get it to work! It comes up as bullet points instead of a hover over drop down menu. maybe I can shoot you my template and you can help me out because I just can't seem to finish the code properly.

Meghan Cooper said...
on 

it's my css code, it uses #top_pages rather than #nav therefore I just keep messing it up.

Meghan Cooper said...
on 

Ahsan -- Yes, you're right

Bekasi supra -- I think creating vertical submenu have a same way like create drop down menu

Michael -- No problem,nice to help you.

Meghan Cooper -- Which blog you want to edit? I need to know the source code of your template in order to help you

d3d3 said...
on 

The JaMonkey.blogspot.com one

Meghan Cooper said...
on 

Hey thanks dude... so badly needed this tutorial... do check it out

http://www.sensible-bakwas.com

Tavish Chadha said...
on 

Meghan~after I saw your blog, maybe you made a mistake at the last step. If the css code is #nav then the javascript code should be ul id='nav'
but if you use #top_pages in your css code,your javascript code is ul id='top_pages'

Tavish~Ok, no problem.I will check your blog

d3d3 said...
on 

Hi! I was able to apply the sub menu but with I hover over it it disappears. Don't know what went wrong, can you take a look?

Here's my site http://www.gimmethatglow.com/

under the navigation menu go to "profiles" then you'll notice the the sub menu shows then disappears.

Thx!

ODARA said...
on 

Odara~I just visited your blog and did not find any error as you say.thx..

d3d3 said...
on 

can you show us the demo/pic about how those code would look like in blogger?
thx

compiequ said...
on 

chinna


thanks dude

Anonymous said...
on 

This is what i look for and many bloggers search for this tips. Nice tips brother..thanks so much!

taman-merdeka said...
on 

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

Term Papers said...
on 

i am newbie, i just trying to make nav menu drop down, but i got problem. please help me, my blog : http://isoconsultants-pmpg.blogspot.com, some menu : Services have submenus:
-ISO 9001
-ISO 14001
-OHSAS 18001
-Other Standards
-Work Place Health & Safety

and another nav menu:
Send Tips:
-Green Tips
-Bussiness Tips

I've been using "The Professional Template II by Ourblogtemplates.com "
thanks for helping.
Please send email to: teti@musa-group.com

ISO-PMPG said...
on 

compiequ~you can see the demo of this drop down menu on this blog.

anonymous~yups,no problem.

taman-merdeka~nice to know that this tutorial is useful.

term papers~Ok,thanks for your apreciate.

ISO-PMPG~ok, I will email you soon...

d3d3 said...
on 

hi this is wajid ameen i have been working for addding a drop down menu for my blog but it isn't working... can u help me? when i add the code given above a vertical menu is being appeared. this is my id when ever you come online plz help me. my id is wajidameen@gmail.com

biobreeze said...
on 

Hi author, I need help please. Can you teach me how to make this menu smaller? It's the same height with my first menu and both look weird together.

My blog is http://glamiva.blogspot.com.

Glamiva said...
on 

Oh yeah, can you tell me how to add and remove the sub menus?

Glamiva said...
on 

Nevermind my questions. I did a post about this article and the answers to my previous questions, except the first one. http://glamiva.blogspot.com/2010/07/menu-navigation-that-drops-down.html

Glamiva said...
on 

In order to understand mobile phone design, it’s important to understand the difference between a traditional “.com” web address and a “.mobi” web address.

Jaz said...
on 

biobreeze~hi wahid, I try to open your blog, but I can't. Can you tell me which of your blog that you want to adding a drop down menu so I can help you.

Glamiva~actually if you want to resize the drop down menu is very simple. You just need to change the height of the drop down menu in css code. but to make it different with your first drop down menu, you must create a new css code with the name ex: "MiniNavbarMenu" and do not forget to change the size of the high.

only as a guide to make a new css code, the key is you have to change "NavbarMenu" and "NavbarMenuleft" to "MiniNavbarMenu" and "MiniNavbarMenuleft" in the css code and html code. The rest code is same, so you can copy from the previous code.

Jaz~thanks for your information

d3d3 said...
on 

i have tried but fail, i have index file designed from vista trial version, please do the same kind of coding for me file:///C:/Users/Harpreet%20Singh/Desktop/jobsansaar.html

please help me out to design with submenus

Thanks

Jobsplanet said...
on 

Hi, can you please tell me how to make the menu centered? It's positioned on the left side and I want to make it on the center of my blog.

Del said...
on 

jobsplanet~can you tell me more specific about your problems,so I can help you?

del~it's very easy, just change the css code
"float: left" into "float: center"

d3d3 said...
on 

Hey thank you so much for this! I've been trying all morning to find one that works and this is the best one yet! I only have one problem I'm stuggling to figure out since I'm pretty amateur, but I would like to remove the space underneath the menu bar and add a space on top under the logo at www.torontodealsonline.ca

Thanks so much for all your help!

jodsg said...
on 

Hi D3d3! I need help, again! Can you please check out my blog glamiva.blogspot.com, I want to remove the underlines on all-menu and sub-menu's. And can you please tell me how to design the menu? Like change the color of texts and the menu itself? Please please~

Del said...
on 

Hi,

I've been trying to get this to work on my blog but it doesn't seem to be working. I've added the css codes to where you have directed and when I preview, no navigator appears at all. It's like the css didn't change a thing at all.

I was wondering if you could help me please. I am opening an online shop & the nagator is all thats stopping me from developing my blog so far.

My email is mariietang@hotmail.com

I hope to hear from you soon.

Anonymous said...
on 

I tested a number of drop-down menu source code given by other authors that claim that it works, but it doesn't (maybe due to my limited coding skills).

So far, only yours is working, thanks for the good work!

SelfDriveTours said...
on 

Great!! Its working....
Thanks....

Vande Soul said...
on 

Thank you! Thank you! Thank you! It's been so difficult finding a drop down menu for us HTML illiterate people

Jessica Hooley said...
on 

hello there..
i have a problem..
it doesn't work properly..
i can see it on the page element
but can not on my blog..
Help me please...

Ladyburd said...
on 

Hi d3d3! I need help! I can't put more than 8 buttons on top of my page, why is that? I put the ninth link on the code part to link to the label and it goes underneath the navigation menu.

Del Glamiva said...
on 

Having trouble finding the code in step 6. Help!

Big Bro said...
on 

Something wrong.........plz help........

tutul said...
on 

Hi,
need some help with your dropdown menu. I got everything set up and it is working fine, except for when using IE (in my case 7) the submenus are not on top but are hidden behind the standard Blogger information (like post header). Can someone please advice?
Thanks,
Thomas

Thomas said...
on 

Hey,thanks a bunch though I have to spend an hour to figure out what's going wrong with mine.But now I have what I want,and all thanks to your guide! I owe you! and Thomas,try this.Go to your html editor and find this word:'overflow:hidden'.Delete all of it.Hope this helps.If not,I'm sorry,and I hardly need to remind you to backup your template before you do anything.Hope it works.

Zee said...
on 

Thank you very much. This has been very helpful.

GM said...
on 

http://entertainmi.blogspot.com/

The words are a little off to the top. How do I change this? Thanks in advance.

Mimi said...
on 

I just installed IE8 and have same problems with menu as with IE7. Like Thomas.

Does anybody have solution for this?

thx

Mislav Radica said...
on 

Why won't it work?

http://mfexp.blogspot.com/

TJ @ MeasuringFlower.com said...
on 

Nice post http://wallztechnology.co.cc
get the latest in business and technology

Emmanuel Olawale Omole said...
on 
This comment has been removed by the author.
Abhijit Bangal said...
on 

Hi nice post. Its helpful too. But can you help me in changing the position of the bar? I want to bring it down.
Regards
Abhijit
http://relationship-troubles.blogspot.com/

Abhijit Bangal said...
on 

Thanks for sharing this post.
I've been using this for my Freebies and coupons blog.
http://savefreebiesandcoupons.blogspot.com/

David said...
on 

thank you for this 'how to' )

if somebody need align menu by center of the page

try add after

#NavbarMenu {

margin-left:auto;
margin-right:auto;

moonimage said...
on 
This comment has been removed by the author.
Crumblet said...
on 

Thank you for this post. I've had problems the first time I tried this but with a little research and bit of html & css knowledge I installed it perfectly!
For those who are having problems, sometimes it also depends on your theme. Like me, I didn't put it after the header coz my theme is a little different. Anyhow, THANKS A LOT!:)

You can see the drop down live action on my blog: crucialcrumbs.com ☺

Crumblet said...
on 

thanx alot its working really fine thank you sooo much

Download for free said...
on 

hi, how do i put the search box together with the navigation menu just the same as your blog?

by the way, i cannot align my menu to the center when i try do:

#NavbarMenu {

margin-left:auto;
margin-right:auto;

Anonymous said...
on 

for social network tips and tricks go to my blog http://techie-media.blogspot.com

nice posting :)

Techie-Media said...
on 

HELP!!! :-/

The scroll-down tab hides behind the sidebar text/pics...

How can I change this???

Anonymous said...
on 

Download on http://designedmenus-d.blogspot.com/

It's easiest way to creat dropdown menu

Me said...
on 

not working in my blog.....!!!

www.fblatest .in

this is my blog remove space and give me the solution

iTechie World said...
on 

hi i am sanjya from srilanka,, thank you very much for your article regarding drop menu for blogger. i have created five menu headings and sub menus as according to the your article .thats all ok . but if i enter another column (sixth menu heading ) ,it is not showing exactly as before menu headings. i have increase the #navbarMenuleft width into 980 px ., before it was 680 px ,but the problem is same. can you tell me how can i overcome that problem ..
my blog is http://www.sanjaya-ranasinghe.com

Sanjaya සිතුවිලි said...
on 

Nice! it works on my blog! thanks for this tip. check out my blog. http://blurredfaqs.blogspot.com

bLurd said...
on 

Nice post. Great blog. Thanks for the share. Keep posting such kind of information on your blog. I bookmarked it for continuous visit. Thanks once again.
html5 video player

html5 player said...
on 

is there any tutorial to placing the search widget in floating right inline with navigation menu?

desain kemasan said...
on 

I've a little problem if you may help me.. I shall be thankful then
my menus appear when i point to the title, but when i attempt to choose from the submenu, they disappear b4 that.. only if i click the down arrow they navigate... how to solve this?

Amal said...
on 

Thank You Very Much, I am creating my website inspiration........
i will follow your website instructions.......
Thank You Very Much Hyderj@dulz

Google Tips said...
on 

hi bro..
i need ur help i cant create more than 5menu in that please reply asap thank u

www.kaviblogdemo.blogspot.com

mail- 19kkarthik@gmail.com

KKARTHIK said...
on 

Post a Comment

Next previous home

Site Info

My Followers

Recent Comments

  © HyperJadulz Magazine series Powered by Blogger Design by HyperJadulz 2009

Back to TOP