19 November 2009

How to add Drop Down Navigational Menubar with Submenus to the Blogger blog.

Advertisements

khemarak-កំព្រា asked me about adding Drop Down Navigational Menubar with Submenus to the Blogger blog.on my previous post How to add a horizontal navigation bar or menu to Blogger?

So I just make some modifications to previous code so that it can display drop down menus.

Drop Down Menu is a list of options that display below a menu option.




So here we go.....

Go to Blogger Dashboard >> Layout >> Edit HTML >> Download full Template.

Press CTRL F and search for
]]></b:skin>

now replace it with

#NavbarMenu {

width: 980px;
height: 35px;
background:#e3edf9 url(http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) 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: #dae8ff;
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:#e7ffb3;
color: #36731b;
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://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) repeat-x top;
width: 200px;
color: #d3d3d3;
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: #e3f1ce;
color: #156018;
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;
}

]]></b:skin>


Now look for the following section of code

<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>


Now just bellow that code add following code

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>


<li><a href='http://colorsfromindia.blogspot.com/2008/08/health-wellness.html'>Health News</a></li>


<li><a href='#'>Deseases</a>
<ul>
<li><a href='http://medimania.blogspot.com/search/label/Acne'>Acne</a></li>

<li><a href='http://medimania.blogspot.com/search/label/Breast%20cancer'>Breast cancer</a>
<ul>
<li><a href='http://medimania.blogspot.com/2007/12/stages-of-breast-cancer.html'>Stages</a></li>
<li><a href='http://medimania.blogspot.com/2007/12/signs-symptoms-diagnosis-of-breast.html'>Signs, Symptoms, Diagnosis</a></li>
<li><a href='http://medimania.blogspot.com/2007/12/role-of-surgery-in-breast-cancer.html'>Treatment</a></li>
</ul>
</li>

<li><a href='http://medimania.blogspot.com/search/label/Mesothelioma'>Mesothelioma</a></li>
</ul>
</li>


<li><a href='http://medimania.blogspot.com/search/label/LASIK'>LASIK</a>
<ul>
<li><a href='http://medimania.blogspot.com/2007/08/how-common-are-lasik-complications.html'>Complications</a></li>
<li><a href='http://medimania.blogspot.com/2007/08/lasik-procedure.html'>Procedure</a></li>
<li><a href='http://medimania.blogspot.com/2007/08/reasons-to-undergo-lasik.html'>Adwantages</a></li>
</ul>
</li>
<li><a href='#'>Webmaster's Corner</a>
<ul>
<li><a href='http://www.webmasters-forum.org/index.php'>Webmaster's Forum</a></li>
<li><a href='http://www.free-blogger-help.blogspot.com/'>Blogger Help</a>
<ul>
<li><a href='http://free-blogger-help.blogspot.com/2008/08/list-of-useful-blogger-widgets.html'>Widgets</a></li>
<li><a href='http://free-blogger-help.blogspot.com/2008/07/blogger-templates.html'>Templates</a></li>
<li><a href='http://free-blogger-help.blogspot.com/search/label/Edit%2FCustomize%20Template'>Edit/Customise Template</a></li>
<li><a href='http://free-blogger-help.blogspot.com/search/label/Search%20Engine%20Optimization'>SEO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

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




Save the Template. Change the Titles and URL's given in second code.

Experiment with values of first code to adjust it with your blog.

UPDATE: jQuery based navigational drop down menu bar for Blogger

Related Posts

87 comments

Anonymous
November 22, 2009 at 1:32 AM

I failed with these steps,I try many times but it still did not work.You know I am having used code below at my header . I can make only one link to HOME , ABOUT ME ....Can you correct my code to make some sub meus under HOME(menu) .Please give me examples by using these code.
1ex div id ='menu'
2ex ul


I see the code about I wanted but I am failed.
Otherwise, I want to create sub menus excluding navigation at header. I want to make in other places as blog list and reader point a mouse it shows some sub menus.I want to use in Add Gadget element pages only , I don't want to use in EDIT HTML.
Thank you very much for helping me

November 23, 2009 at 2:40 AM

Currently there is no Add Gadget type available. You have to Edit HTML.

First you should have pages to add in menu.(about me/contact page)

Place the third code just below the </div> of second header-wrapper code.

Only do this. And leave your blog URL.

November 23, 2009 at 5:44 AM

I failed with full download tamplate.You see my blog, I have HOME,Contact,About me but I can not add submenus under them.
Another thing I want to get code of "Post a Comment" like yours that I am writtng my comment.i.e like your form : it has POST a Comment,Coomment as.....,Post Comment,Preview. How can I get this code.

November 24, 2009 at 2:09 AM

Use the codes given here.

For Embedded comments form read - http://free-blogger-help.blogspot.com/2008/07/how-to-add-embedded-comments-form-in.html

December 9, 2009 at 8:14 PM

awesome tutorial, worked great. I've never seen anything this cool on blogger. I tried to change the background color of the bar, but realized that it is probably the image you loaded to photobucket that won't load independently in a browser. Is there a possibility that it can be changed to a different color? I need it in 764e46. Thanks for you time and help!

December 9, 2009 at 9:10 PM

never mind. I just fixed it by uploading my own image. THANK YOU so much. Brillian Tutorial. Used it on my photog blog.

December 10, 2009 at 12:16 AM

yes. Just remove/change
http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg
from the code.

December 16, 2009 at 12:15 AM

Thanks man, it works great and all inside the blogger template.

I just want to ask you if there is a way to remain visible the path that the user follow while he drops down the menu? (for example: by painting all the necesary links on the tree that you must follow to get there)

Again, thank you

December 16, 2009 at 11:59 PM

did you mean the different color for visited links(path).

December 17, 2009 at 4:52 AM

No, sorry for my english. It's too bad.

Let's try make it graphic. The following will be the menu:

Home | Movie | Song | About | More
------|------------|-------------------------
| By Author |
|------------|------|
| By Title | A |
|------------| B |
| C |
| D |
| ... |

December 17, 2009 at 7:15 AM

it is possible. First remove the http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg from 1st code. The experiment with HTML color codes.

February 4, 2010 at 7:04 PM

This is great by the way in blogspot the second codes must by paste in a Gadget so that it will work... adding it to a html/javascript
the first code was correct copy-pasting it to the edit html
It will work!! I'll soon replace my Jquery codes to this cause i love how it fuction.. :)

Here's my dummy webblog http://vicevanish.blogspot.com

Sorry but all the codes are not yet changes to my own design ^_^ i'll soon fix it

February 18, 2010 at 5:40 PM

Hey thank you for this. A question, I would be very grateful if you respond. How Can I centralise the texts?

February 18, 2010 at 10:20 PM

@ Kaveh Binesh

Look for the code

#NavbarMenuleft {
width: 680px;
float: left;

Change
float: left;
to
float: center;

Anonymous
March 2, 2010 at 12:09 AM

Hi can you tell me how to add and display items on the menubar? I mean I have items like HOME, GIVEAWAY,NEWS, HOW TO, WINDOWS 7, WINDOWS on the menubar. Now I want to add extra item CONTACT right to windows. I did everything but I could not able to show this item on the menu. Although there exists enough space for this.

March 2, 2010 at 1:59 AM

@ Now I want to add extra item CONTACT right ......

Let me check your site first.

March 9, 2010 at 9:15 AM

Superb!!!! thanks alot

March 20, 2010 at 6:46 AM

thnx very much....
can u plz help me, i follow the above comments and i can able to add the menu bar but i cant able to add more than six main tab (home,healthnews,deseases,lasik....). Can u plz help me to how to add more than six main tabs

March 20, 2010 at 8:17 AM

<li><a href='Your URL'>Tabs Title</a></li>

is a code for main tabs

add it after

<li><a href='http://colorsfromindia.blogspot.com/2008/08/health-wellness.html'>Health News</a></li>

March 20, 2010 at 11:21 PM

hi drraman,
thanx for ur help. but when i add a newtab to it, the last tab of the menu bar come to below of the whole menu bar. plz help me to avoid this...
http://.musiqofindia.blogspot.com

March 21, 2010 at 12:09 AM

experiment with very first code that is width style padding margin etc.

March 22, 2010 at 12:47 PM

How do I get the labels to work properly?

March 23, 2010 at 1:19 AM

@ Mbaldwin
Please explain in detail.

March 24, 2010 at 3:07 AM

hii it works.. thanxx very much.

#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;

i changed this to

#NavbarMenuleft {
width: 880px;
float: left;
margin: 0;
padding: 0;.
thanx very much...

http://musiqofindia.blogspot.com/

March 24, 2010 at 3:10 AM

hii drraman, when i add image to the title of my blog, this drop down menu bar will be disappeared, why this happend , plz tel me ur kind suggestion...and help me....

http://musiqofindia.blogspot.com/

March 24, 2010 at 11:37 PM

Visit - http://free-blogger-help.blogspot.com/2010/03/how-to-adjust-hieght-and-width-of.html

March 25, 2010 at 1:36 PM

what a great tutorial! thank you! one question. . .i would like all my posts with certain labels to appear under my "labels" drop down menu on my navigation bar. for example, i would like all my posts with a "cooking" label to be pulled up on my main blog when i click on "cooking" in my labels drop down menu. is this possible? thank you!

March 25, 2010 at 1:41 PM

oops, sorry! it does that automatically, doesn't it! amazing! thanks so much, i am in love!

May 29, 2010 at 7:53 PM

I want the list of links centered (and/or evenly spaced) on the navbar. I tried your suggestion above by finding and changing this line.

#NavbarMenuleft {
width: 680px;
float: left;

Change
float: left;
to
float: center;

however it is not centering it. Can you take a look and tell me what I need to change.

http://simplypanachedesignandphoto.blogspot.com/

May 29, 2010 at 8:58 PM

add <center> tag before <div id='NavbarMenu'> and </center> tag after </div> <!-- end navbar -->, I hope this will work for you.

July 20, 2010 at 8:56 AM

@ draaman

i want to add submenu to my current openings bar, should i have to write about that posts or not.

if write then it comes on top of my blog,how to avoid this. i want to add different type of jobs like telecom, insurance, bank etc...in a submenu then in that submenu's i want to write about openings available in that field.

link to blog http://jobsansaar.blogspot.com/

July 21, 2010 at 3:01 AM

Hi Jobsplanet.
First add a nice photo to your Blogger profile!!

OK. Now back to the work.

This is a multilevel menubar. Use the original code given in last step and then add your links. Also carefully read above comments. That may help you.

July 21, 2010 at 3:21 AM

@drraman

Hi drraman

i did that steps and that is why i have menubar on top, now i just want to add multilevel menubar on my current opening section of my blog..
http://jobsansaar.blogspot.com/

July 21, 2010 at 3:40 AM

Check your code
You have
<li><a href='http://jobsansaar.blogspot.com/2010/07/current-openings.html'>Currnt Openings</a></li>

You have to modify it so it will look like


<li><a href='http://jobsansaar.blogspot.com/2010/07/current-openings.html'>Currnt Openings</a>
<ul>
<li><a href='URL'>Title</a></li>

<li><a href='URL'>Title</a>
<ul>
<li><a href='URL'>Title</a></li>
<li><a href='URL'>Title</a></li>
<li><a href='URL'>Title</a></li>
</ul>
</li>

July 21, 2010 at 3:41 AM

This is the basic thing. You have to do it yourself.

July 21, 2010 at 3:51 AM

@Thanks Drraman

July 21, 2010 at 5:57 AM

@drraman, i tried this, as i have 11 submenu's for each, it becomes complicated, i did well But it shows some errors of ul or xml errors.
please have a look on the code.........

July 22, 2010 at 1:44 AM

i tried but failed, i put the code on my current openings for you to look on it, please have a look...

http://jobsansaar.blogspot.com/2010/07/current-openings_21.html

please help me out in this.

July 23, 2010 at 1:20 AM

@drraman please help me out in designing of menubars on my current openings section,, i tried many times but failed, please help me out ..

July 23, 2010 at 1:28 AM

@drraman please design the code for me for submenu's on current openings and then label cloud..

please Sir, do these 2 steps for me

July 23, 2010 at 11:58 PM

It is very easy. You can do yourself.
I will suggest to join
http://www.webmasters-forum.org/index.php
It is for who needs help in blog.

July 24, 2010 at 2:05 AM

@drraman i want like this, i did but this is trial version i am not able to save it untill i purchase, whats the other alternative, if youcould help me to make this kind of thing for my blog.

file:///C:/Users/Harpreet%20Singh/Desktop/jobsansaar.html

July 24, 2010 at 7:22 AM

Please get Free menu maker here
8 free tools for bloggers/webmasters!

July 28, 2010 at 2:14 AM

@drraman i am not getting it please help me and design code yourself and send it to my email..at jobzplanet@gmail.com

please its very urgent...

Thanks Sir

July 29, 2010 at 1:04 AM

Now you have changed template. And it has it's own menu navigation. Go to edit HTML and do it.

July 29, 2010 at 1:58 AM

@drramn Thanks i have done ..

Anonymous
September 27, 2010 at 1:44 AM

is there anyway you can adjust the code so that it has the look of this one

I would just use the code from that site but the drop-down features don't work when the widget is placed right under the Header section.

September 27, 2010 at 1:46 AM

Add it as a widget/gadget.

November 15, 2010 at 6:12 PM

Awesome: thanks drraman, that was an excellent tutorial! Nice and simple, so even a coding dunce like me could understand it enough to get a result. :D

Due to your post, the navbar I've stuck on my site seems to be just about working how I want it to: I'll play around with it some more in the future, but because of your help, I've now got a great base to work from.

August 18, 2011 at 3:25 AM

great work, thank you for this code.
http://popcornoflife.blogspot.com/

August 28, 2011 at 4:40 AM

Thank u for your work, it is a great help to all bloggers! I've made a cool looking blog thx to you. But now, i have a bit problem, i hope u can help me.

The drop down menus. They are working, but, as i'am making a monster database, i have to do lot of sub menus, and the third, fourth sub menu appears at the same time on mouseover to the third...

Maybe i explained it wrong, let me show u:
http://monstersandbeasts.blogspot.com/

for example watch the menu:
monsters and beasts - movie monsters - sci-fi - alien - xenomorphs

U will know, what i talking about. Hope u can help me :)

Anyway, i hope u like my blog's design :D

August 29, 2011 at 12:36 AM

Hi KenytheOne.

First thanks to using Blogger-Help.com to make your site awesome. In the navigation bar you have 5 levels and this script supports up to 3 levels. Solution is reduce the levels or create separate menus for them.

August 29, 2011 at 8:02 AM

Thank u for answering me. I'am trying to reduce things, but it is a hard work in a database. But... thx anyway :)

And i alway want to ask: Is there any way on blogger, to create a toplist, which is show the posts depending on their rating? I can't find a real blog toplist on the net, just the "most commented" thing... but i'am more interested in rates.

August 30, 2011 at 3:03 AM

Currently there is no any script for Top Rated Posts. But you can try "Most Popular Posts" feature by Blogger here: http://www.blogger-help.com/2010/09/popular-posts-widget-for-blogspot-by.html

October 18, 2011 at 3:12 AM

getting error
xml error...

October 19, 2011 at 6:23 AM

Hi Premium
Add all the codes carefully

November 7, 2011 at 2:02 AM

hiii, the sub menu bar after following the 2 steps is placed above the HOME,Contact etc options. Also how to attach each post under the heading MY Posts-http://elli-itsmylife.blogspot.com/

December 1, 2011 at 2:44 AM

how to attach each post under the heading MY Posts-http://elli-itsmylife.blogspot.com/

December 1, 2011 at 4:59 AM

Hi Eli
I have checked your blog
I have better suggestion. Use "My Recent Posts" to showcase your posts. Check it here: http://www.blogger-help.com/2008/08/how-to-add-recent-posts-widget-to.html

In the navigational bar use labels like Poems, Shaayri and like that.

December 2, 2011 at 5:25 AM

hi, hve successfully added the widget of recent posts....but when still the problem persists wid labels on navigation bar... :(

December 2, 2011 at 6:27 AM

m unable to add submenus to labels under poems
eg- poems- post 1(name of the poem)
post 2(name of the poem)

December 2, 2011 at 11:01 PM

Hi Eli
After you will add label link to Navigation and when anyone click on it all posts with that label will be listed.

December 7, 2011 at 1:49 AM

hi, i have used the pages list for navigation bar using gadget element. i have labels like home, feedback and contact on my blog. now want to add labels like Articles, Poems etc and link my few posts to it.... still showing error...
http://elli-itsmylife.blogspot.com/

December 7, 2011 at 5:01 AM

Hi Eli

Can you post that error here?

December 13, 2011 at 5:22 AM

hii, if you want, i can give the html template details on ur blog id....so u can find out the problem better coz i cannot even add any new and nice templates from ur blog:(

December 14, 2011 at 2:21 AM

Get a better template from this website.

Before uploading a template, first make backup of all additional codes you have added to your blog like
wibiya widget, Feedjit, Book shelf and other.

Go to edit html and upload the new template (xml file) there. When it asks for Keep Widgets select to delete it as you have earlier back up of them.

December 15, 2011 at 4:55 AM

thanx for the reply....still working on drop down tabs....hhahaha

December 17, 2011 at 8:09 AM

The link for direct submenus http://www.blogger-help.com/2011/05/slaten-blogger-tempalte.html shows error as follows. The XML page cannot be displayed
Cannot view XML input using style sheet. Please correct the error and then click the Refresh button, or try again later.
The download of the specified resource has failed. Error processing resource 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict...

and is WinZrar format(shows error as above) unlike the XML file template u suggested before....:(:(:(

December 17, 2011 at 8:29 AM

m so sorry, i just opened the zipped file and direct menu link template works..... so so sorry

December 18, 2011 at 1:51 PM

I am sorry to bug you but I need some help. I created a sample blog at http://kimsample.blogspot.com/ with you recommendations from above. Everything worked out beautifully. So I went to the blog I am creating (to publish) here at http://www.jokes-on-you.com/ and I am running into some issues. I found the area to replace the 1st section you discussed (this part: ]]>). I am running into an issue with the 2nd half of your post though. I am assuming because the layout was written differently compared to my sample blog (in the code) but I cannot find the exact location in my Jokes On You blog to replace with your 2nd batch of code (in order for me to get my menu up and running. Can you please help me? I can email you the code and maybe you can distinguish what I should do? I am also looking to change the font of the menu as well, which I am unsure how to do in my new blog. I am trying to use the 'Coming Soon' font. Let me know as soon as you can. Thank you so much! Blessings, Kim

December 18, 2011 at 11:53 PM

if you are too confused then use the templates that already have drop down meubar.

http://www.blogger-help.com/search/label/2%20Column%20Templates?&max-results=6

December 22, 2011 at 5:16 AM

hi, i have uploaded the slaten template from this site.
http://elli-itsmylife.blogspot.com/.There are many default marks on my blog, how to get rid of them.
the header is darkened and visibilty of home, feedback is blinded and similarly titles on the sidebar.....how to change that???

December 23, 2011 at 5:11 AM

I got it. The problem is due to the background images are deleted.

Now I uploaded with all images. So download it and upload to your blog. Sorry for your inconvenience

December 26, 2011 at 6:43 AM

the first 2 posts are in error/defualt language...how to rectify it

December 26, 2011 at 10:36 PM

Sorry but ....... Please contact the original designer of that template here:
http://www.premiumbloggertemplates.com/2011/05/slaten-premium-blogger-template.html

January 30, 2012 at 7:32 PM

A very helpful article.I'll definitely try it to my blog.

Thank you.

February 23, 2012 at 12:45 AM

It was very helpful tutorial. One thing i noticed that i could only add maximum of 6 main titles in menu bar . Is there any way to increase it to more i.e. add 2 or 3 more titles so that total of 8 or 9 main titles will be there in menubar.
Visit my blog

February 23, 2012 at 2:53 AM

In The code you have added below
<div id='header-wrapper'>

Add following
<li><a href='http://colorsfromindia.blogspot.com/2008/08/health-wellness.html'>Health News</a></li>

just below

<ul id='nav'>

February 23, 2012 at 3:46 AM

My bad , the extra titles were there but invisible, DrRahman is there a way to shift them to the right, i mean u will know what i mean when u check my site . Plz visit my site
U can see the invisible title -'Announcement' just below the title- 'Home'
Plz tell me a way to bring it adjacent to the title - 'Wallpapers'

February 23, 2012 at 3:58 AM

Problem solved ! Just changed the foll in 2nd code-
'NavbarMenuleft' changed to 'NavbarMenucenter'

March 21, 2012 at 11:01 AM

Great post... I used it on my blog and I am facing an issue. Submenus within a submenu are not visible. I have check my code many times but couldnt find the error. My blog is: http://forex-crunch.blogspot.com

Kindly look into the issue.
Thanks

March 21, 2012 at 11:43 PM

you have to be very careful about codes in final step,

March 22, 2012 at 6:08 AM

It was not working even after I used your code completely (without any modifications). Earlier it was showing submenus but not the submenus within submenus. after that I changed my template and now it is not showing even submenus. Kindly help me with this.

March 22, 2012 at 11:33 PM

After changing the template add these codes again.

March 23, 2012 at 3:40 AM

I have tried it. I copied and pasted the codes exactly as mentioned above but still I could not see any difference. None of the sub menus are working.

March 24, 2012 at 12:32 AM

in this case I will suggest change your template to that one already has the drop down memus:
http://www.blogger-help.com/search/label/2%20Column%20Templates?&max-results=6

July 27, 2012 at 8:44 AM

yea this is the way to create sub menu for blogger.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More