MAR
31
2010

Horizontal Drop Down Menu in Blogger

Here is a fairly easy tutorial for installing a drop down navigation bar into your Blogger Blog. (Like the dark brown one in my header section)

hornavbar1

STEP 1: In Blogger, go to your “Layout” and “Page Elements” section.

  • Click on the “Add a Gadget” link just under your header image: (Note: If you are just starting your blog, the “Minima Lefty” template is a good one to start with. It’s simple and you can customize it as you go.)
  • From the Gadget’s List, select “HTML/Javascript” option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the “Title” section of this widget blank.

<style type=”text/css”>
/* style the outer div to give it width */
.menu {
width:1000px;
font-size:14px;
padding-bottom:40px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
font: 14px Tahoma, Arial;
}
.menu ul ul {
/* width:124px; */
border:1px solid #fff;
border-width:0px 0px 1px 0px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:125px;
position:relative;
border-width:0px 0px 1px 0px;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
color: #ffffff;
text-decoration:none;
width:125px;
height:30px;
border:1px solid #fff;
border-width:0px 0px 0px 0;
background-color: #45240e; /*DkBrown*/
padding-left:1px;
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:125px;
w\idth:125px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background: #fecebe; /*LIGHT-PINK*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
color: #45240e;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#e36c6c; /*DK-PINK*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
color:#ffffff;
}
.menu ul ul :hover > a.drop {
background: #fecebe; /*LIGHT-PINK*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
color:#45240e; /*DkBrown*/
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background: #fecebe; /*LIGHT-PINK*/
color:#45240e; /*DkBrown*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#e36c6c; /*DK-PINK*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
}
.menu ul ul ul :hover > a {
background:#e36c6c; /*DK-PINK*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:125px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
.menu ul ul ul{
left:126px;
top:0;
width:125px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}
/* style the table so that it takes no part in the layout – required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background: #fecebe; /*LIGHT-PINK*/
color:#45240e; /*Dk-BROWN*/
height:auto;
line-height:1em;
padding:5px 0px;
width:125px;
border:1px solid #fff;
border-width:0px 0px 1px 0px;
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:124px;
w\idth:124px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#ffffff;
background:#e36c6c; /*DK-PINK*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#ffffff;
background:#e36c6c; /*DK-PINK*/
border:1px solid #fff;
border-width:0px 0px 1px 0px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul :hover ul {
visibility:visible;
}
</style>
<div>
<ul>
<li><a style=”color: #ffffff;” href=”http://YOUR URL HERE.com”>Tab 1 Title Here</a>
<ul>
<li><a href=”http://YOUR URL HERE.com”>Sub Tab 1.A</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 1.B</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 1.C</a></li>
</ul>
</li>

<li><a style=”color: #ffffff;” href=”http://YOUR URL HERE.com”>Tab 2 Title Here</a>
<ul>
<li><a href=”http://YOUR URL HERE.com”>Sub Tab 2.A</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 2.B</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 2.C</a></li>
</ul>
</li>

<li><a style=”color: #ffffff;” href=”http://YOUR URL HERE.com”>Tab 3 Title Here</a>
<ul>
<li><a href=”http://YOUR URL HERE.com”>Sub Tab 3.A</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 3.B</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 3.C</a></li>
</ul>
</li>
</ul>
</div>

STEP 3: Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be ‘clickable’. If not, you can just put a # sign where it says http://URL HERE.

  • You can add or delete as many of the MAIN tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href=”http://YOUR URL HERE.com”>Tab 3 Title Here</a>
<ul><li><a href=”http://YOUR URL HERE.com”>Sub Tab 3.A</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 3.B</a></li>

<li><a href=”http://YOUR URL HERE.com”>Sub Tab 3.C</a></li>
</ul>

</li>

hornavbar3

  • You can adjust the length of your buttons by adjusting padding as seen in red below. The padding pixels are read as follows: top, right, bottom, left.

#navbar li a {
display: block;
padding: 4px 9px 4px 9px;
background-color: #43291a; /*TAN936f47*/
text-decoration: none;
border-right: 1px solid white;
color: #EAFFED; }

  • You can also change the margins to move the navbar as seen in red below. The last number in the margin is the LEFT margin. The margin pixels are read as follows: top, right, bottom, left. A negative number will move your item to the left, a positive number will move it to the right:

#navbar {
background-position: center;
margin:5px 5px 5px 300px;
padding: 0;
width:1000px; }

STEP 4: Customize your sub tabs by changing the Green Titlesto whatever you want. Include the URL for each one as well if you want it to be ‘clickable’.

  • You can add or delete as many tabs as you need, just make sure to copy the entire code for the Sub-tabs section:

    <li><a href=”http://YOUR URL HERE.com”>Sub Tab 3.A</a></li>

STEP 5: Customize the colors of your tabs to match your site. Here are some online color sites to help you out! I also commented my colors to help guide you.

hornavbar2

BUTTON: To Change the background color of your buttons find the ‘background-color’ section of the code

FONT: To Change the font color find the ‘color’ section both are highlighted in the code below. You can change the colors of each section if you like, or use the same colors for each section. Just mess around with it and have fun! If you don’t know HTML well, you may have to experiment with changing colors until you get the right one. The code below is just an example of one of the sections:

#navbar li a {
display: block;
padding: 4px 9px;
background-color: #43291a; /*Dk Brown Tab Background*/
text-decoration: none;
border-right: 1px solid white;
color: #EAFFED; }

STEP 6: Add your URLs : To get the url code for your tabs, visit the page you want, then simply copy and paste the URL from the Address Bar in your browser. You can also ‘search’ your blog and use that url as well to include several posts. It will look something like this:

http://www.confessionsofahomeschooler.com/blog/category/homeschool/lapbooks

urladdress

STEP 7: Give yourself a big bloggy High Five for being AWESOME!

TROUBLE SHOOTING: If your navigation bar shows up BEHIND your posts so you can’t click on the drop down lists, visit Mama Jenn’s Blog for a Fix!

Happy Blogging!

Related Posts Plugin for WordPress, Blogger...

Comments

  1. This is sooo helpful! another question though….where do you get/how do you find the individual URL's you want your tabs to go to?thanks!

  2. This looks great. I appreciate all of your helpful tips. I love to fiddle with my blog and try new things. I am still not having any success with the tabbed widget, but now I am wondering if it has something to do with the template I am using. Maybe I should start all over now that I found out about blogger in draft. Always something to learn about this hobby of mine. This hobby can take a quite a bit of time, but I like it. :-) Thanks again.

  3. WOW! THANK YOU! Now I just need an hour or two to play!

  4. Ha ha. I'm with Annette on this one!

  5. You Rock Erica! Thanks! I have ONE QUESTION…. My bar is over too far to the right. How do I move it over? I pasted the code from yours? HELP! What line to I tell to move over?

  6. Erica,This is THE BEST tutorial I've seen for people who are not HTML pros. You are fantastic in everything you do. Thank you!

  7. I have the same question as Di.. my bar is too far to the left. I know that it's floated to the left, but as far as I know you can't "float center"… so how can I get it in the middle without adding more (unnecessary) tabs?Thank you SOO much for posting these tips. I've been waiting for this one because I've been wanting to be able to do this for MONTHS (maybe longer ;)

  8. Thanks so much for posting this! I was one of the people that had emailed you about how to do this feature! =) I have recently went to WordPress though, but I'll know how to do it if I ever return to Blogger! Thanks again!

  9. Thanks Erica! It worked like a charm and looks fantastic!

  10. Thank you for taking the time to write this out and share it! I know what I'll be playing around with next nap time ;-)Best wishes!

  11. I haven't been blogging for long here on blogger and I have been trying to figure out that tab thing for months. I was so excited to see your instructions, they were so helpful. Thank you for taking the time to share.

  12. Carrie Cooper says:

    Carrie @ comfortedbyGod.blogspot.comI did everything as instructed and it came out GREAT! I even figured out how to make the tabs larger, change the fonts…wonderful!!Thanks so much for your help.

  13. I've made my tabs and changed everything I want except for the color of the dropped down tabs. I've tried to change the color code that you have labeled light pink but it won't change the color. Am I missing something? I managed to make my tabs black and when rolled over they are a dark orange, so the pink drop down doesn't look so good ☺ ANy ideas?

  14. Dana: Did you make sure to try all the spots where there is light pink? I have it in 3 places in the code, maybe try to change the other ones and see if that takes care of it.

  15. This is great! I'm just stuck at changing the colors. How do I do that, and how can you change fonts? Thanks!!

  16. Hatch Family: You can EDIT the FONT here:font: 12px Tahoma, Arial } Its best to give some websafe options though, or peoples browsers won’t show it correctly. I didn’t change my font, so maybe google websafe fonts for a list of options.Also, for color changes, just change the color hex code from this:background-color: #43291a; /*TAN936f47*/to this:background-color: #NEW COLOR CODE; /*TAN936f47*/You can change any of the colors, if you aren't sure which changes what, just do them 1 at a time.I gave web safe color websites in the directions under STEP 5.

  17. Got the colors, just not sure about changing the fonts. Thanks for this sweet tutorial:D

  18. Thanks so much! This the exact tutorial and code I've been looking for. Can't wait to try it!!Blessings to you!

  19. wHEW!! just did this – one thing i'm stuck on…how do you change the color of your font? Like on yours, when you hover it changes to dark pink with BROWN text…..

  20. Laura: You can edit the text color by editing the individual sections where it says "color: #43291a; /*TAN936f47*/" If you don't know how to read HTML it'll be trial and error for you, so just change one at a time until the one you want changed works!

  21. Thanks for posting this! I do have a question though. I'm having problems with being able to click the links. I'm not bloggy savy so just wondered if you had any tips? Again, not super bloggy savy so I know this is operator error… :)Thanks,Nicole

  22. NICOLE: Step 4 is where you put in the 'links' to your buttons.The easiest way might be for you to click on the page of your blog you want, then copy the URL from the address bar in your browser then paste it into the HTML code where it says "http://Your URL Here"

  23. Thank you!!! I have read so many tutorials about Nav Bars, yours is the first one that I feel like I can actually do!

  24. Thank you so much! I have a question, though. I have been working all day and can't get my subtitles to drop down. They are there, but the header does not allow them to show. I have played with different templates in Blogger and have found the subtitles to either be translucent against the post or they do not drop down past the margins of the gadget. Any ideas what is causing this?

  25. Your tutorial is great, but I seem to be having a problem. I am trying this out on a test blog. Anyway, when I view the blog and hover over a category that has quite a few drop down items I can't highlight any, but the first one. Also, the drop down menu is behind my post not on top of it. Any help you can give me would be much appreciated. Thanks for all you do.

  26. So excited to find this tutorial! I have been wanting to do this for some time! However, for some reason it is showing up above my header instead of below it- any idea of how to fix this or why it is so high? Thanks!

  27. Chic Mama: You may need to go into your blog design view and grab the header bar and drag it below your header.

  28. Outstanding tutorial! Thank you so much :)

  29. Great stuff, been looking for something like this for ages. Just wondering if you know of anyway to have the menu dropdown but then display the links horizontally below the main menu rather than vertically?.

  30. TS, I'm sorry, I'm not sure, but I bet if you google you maybe able to find out.

  31. I think I love you… :)

  32. Hey, thanks for this post. Clean and easy. I googled a bit on the subject and pretty much all I found was code that involved editing the html on the template.I have one problem though, the same as Jackie above:The dropdown menu appears behind the post and when try to hover a submenu, the dropdown closes.Do you recon it has anything to do with the bottom margin of this bar? Because it seems to be working for everybody else.I'll be waiting for a solution. These dropdowns are crutial to my blog ;)I'm using the 'Picture Window' template, btwThanks

  33. I also tried to create a code for a sub-sub-tab (something like 1.A.1) but it does not seem to be possible. Do you have or know of any way to do this?

  34. You are my new favorite blogger!!! I have been looking and looking for something like this and you have it!!! Once I get mine up and running, I am going to add a post linking back on to how exactly I did this. I have faith that it works and it looks so simple!!! I am going to add your button to my right sidebar. I can't thank you enough… I am just so excited! And giddy!Kristen Alltheproofineed.blogspot.com

  35. I am so sorry I have so many comments! I was just wondering how you were able to delete the "Showing newest posts with label meme. Show older posts" line that happens when you click on a label. I noticed that your nav bar is full of sorted labels and yours doesn't show up. On mine, it wont let me click below that nav bar once the drop down goes that far down. Is there any way to fix that? I noticed other people have the same problem too.I am so grateful for all of your help!Kristenalltheproofineed.blogspot.com

  36. Well…this has been asked before, I can see that…but i did not see a response.My navbar is floating to the right and i would like to have it centered…Now…It works on an old blog I'm testing it on…copied and pasted to a new blog and it totally fails…is different code required for the newer blog…built 2 days ago.Works: http://christophphotography.blogspot.com Does not work: http://christoph-theartofseeing.blogspot.com Thank you so much…Christoph

  37. Christoph: You should be able to say where to float the navbar here where it says float:left by changing it to center#navbar li {list-style: none;float: left;If that doesn't work you can always mess with the margin to scoot it manually like this:margin: 0 0 0 -70pxthe -70px will move the bar to the left, positive pixels will move it to the right. You can also adjust the width of the buttons by increasing or decreasing the padding values:padding: 0 10px 0 10pxSo this section would look like this:#navbar {background-position: center;margin:0 0 0 -70px;padding: 0 10px 0 10px;width:880px; } I think that the new blogger draft mode has messed with this code a bit but with some of these work arounds you should be able to fix it.

  38. Thanks Confessions…I'll try your padding idea and let everyone know.

  39. This is a real blessing. Thank you very much! Mine don't look as nice as yours but they are there and I love them.Blessinsg,Debbie

  40. I just wanted to let others know that I figured out how to make all of the drop down links to be the same size like yours. I've been looking for it for a long time and all it took was a little line. I just added width underneath this section of your code. I hope if anyone was looking for this, they find this helpful!#navbar li ul {width: 125px;margin; 0;padding: 0;display: none;background-color: #fff; /*LIGHT-PINK*/}

  41. Thank you so much for sharing this post!!!It was so helpful. It looks nice and works perfectly. I have spent several hours searching, and was so happy to come across your post :)

  42. the sub tabs are not working at all !!,.they are shown but wen i move the mouse over dem they disappear pls helpthis is the blog http://sprawlover.blogspot.com

  43. ALLWYN: They are working fine for me in firefox, are you using the most updated version of IE? Also, there is a fix for them if they are getting caught behind your post area here: http://mama-jenn.blogspot.com/2010/05/drop-down-menu-no-more-hiding.html

  44. I was so happy to come across this yesterday. I put it in my blog no problem. It works perfectly in Safari/Firefox. But I tried it in IE and I am missing one whole column and some of the tabs are missing too. Do you know a fix for this?Thanks in advance!

  45. Can you share any tip on how to add the extra column drop-down like you have with your Arts & Crafts…then Easter Crafts and then that Extra column of Easter Crafts?? I've tried a few ways, but I keep getting it wrong :( Thanks for any help.

  46. I just found your blog and I am enjoying (not so much now) messing with my blogI am stuck though.I can not get my tabs right. they are stacking under each other and disappearing when I hover over them.www.trustinggodntx.blogspot.comcan you help me?!

  47. absolutely love this! i've always wanted to have this nice drop-down menu and now i finally have it, thanks to YOU :) i'll definitely keep on following your amazing blog!-outihttp://pienikuvakirja.blogspot.com/

  48. hi i was woundering what i put in subtab1a i am doing a recipe section how do i do a link where do i link if from sorry the tab came up but i dont know wht else to do thankshert4himerica

  49. 'Really neat work :)this is very useful for someone like me who's not really good in coding. I like your footer design as well, did you use codes for this too?

  50. Jen @ Kids Bean Bag: Yes, I just searched for adding 3 column footer to blogger and used that code.

  51. HI Erica, This is wonderful and just what I was looking for to replace my archives widget. One question: I noticed your nav-bar has multiple tiers of drop downs. For example under your tab "Moms Stuff" – the blogging tab pops out into yet another list. I tried figuring this out but I'm not doing something right because I end up getting a second whole nav-bar for my tertiary links instead of just another popout list. Can you help?Thanks so much for the tutorial, I'll be definitely linking back to it on my blog. Tara

  52. Tara,email me at homeschooler confessions {at} gmail {dot} com and I'll try to help you.

  53. Erica, I absolutely LOVE your blog. I have taken this up as sort of a hobby after starting one "private" as a journal, I wanted one for a memory of our HS years. I had looked everywhere for a code to insert a drop down menu, when I realized you had one all along! I did all the steps you posted but the sub-menus on my navibar only show the first one. How can I fix it so they all show up? thanks in advance~ Brandycastleacademy@ymail.com

  54. Thanks for sharing your expertise! I was able to follow your directions and create my own drop down menu bar! The organization is going to take me a bit of ongoing work, but the menu bar is amazing. :)

  55. Erica, I used the code for your navigation bar and it worked out great, although would you be willing to share the code on how to make it multi-level. like in your drop down menu. Thanks Brandy

  56. I can’t get it to work :( I am copy and pasting the entire thing into my widget box and all it does is show what I copy and pasted on the blog. Help?

    • Amanda,
      Are you making sure to grab all the code? If you don’t get all the tags you’ll just get code. Also, not sure what you are using, if you’re on the new blogger draft mode you may have issues there too, but still it should work.

  57. Hello Erica!
    I few months ago I used your above code to make a drop down menu on my blog. It worked perfectly! This morning , by accident, I recked the menu. I once again copied the code to make a new menu and it is not working. Has the code changed since you moved this post from blogger? If so, do you know where else I can find a code for a drop down menu?
    Thanks, April :)

  58. lynzee head says:

    the code is not working :( It worked last time I tried it out, this time it doesnt.

  59. Has anyone had luck with this drop down menu html code under the new blogger set-up? It’s not working for me at all.

  60. can you explaine it more please, i trying to get a navagtional bar like yours , and it not working , i pasted your code, in new gaget like you said and it wounded up being vertical and no colored tabs. any help would be greatful. i would like it to be horazontal just like yours.

  61. Great tutorial,I am wondering how you would make sub tabs within sub tabs?

  62. I just found your tutorial and I must say it is by far the best I’ve seen! Thank you for sharing. However, when I installed it, the alignment is too far to the left on my blog and the sub tabs are not hidden for some reason. One is even overlapping the other. Is there any way you know of to fix this problem? I’d certainly appreciate any insight you could give. Thank you so much!

  63. I have tried and it hasnt worked for me. I know there is somethingi am doing wrong, but it just doesnt work. Help please.

  64. Hi
    Just a question… Where is this code supposed to be?
    #navbar li a {
    display: block;
    padding: 4px 9px 4px 9px;
    background-color: #43291a; /*TAN936f47*/
    text-decoration: none;
    border-right: 1px solid white;
    color: #EAFFED; }
    I can’t find it in the code you said to put in an html widget…
    Also, I’ve made the drop menu, but it’s being displayed as a list not a dropdown? Am I supposed to change the html of my template?
    Thanks

  65. Anna Nuttall says:

    Hi it not working for me, i’m using the simple template on blogger and it gone really funny, is there a way to fix this?

  66. Callie spring says:

    Thank you so much. I had spent 2 days browsing all drop down menus but i had ever seen this beautiful one. Thank you so much. I tried them it works cutely. So much thanks.

  67. Callie spring says:

Speak Your Mind

*


*