101 Blogging Tips: Tip #38 (Use Dropdown Menus)

I'm excited to share this new series with you, called "101 Blogging Tips". In the series there will be 101 blogging tips that you can begin applying to your blog today! Don't wait, get started now!

Tip #38: Use a Dropdown Menu

One way of uncluttering your blog and sidebars, and make it easy for your readers to find what they are looking for, is to use a dropdown menu at the top of your blog (in the Nav Bar area). Being at the top, again, makes it so easy to find and for your readers to use it.

Many WordPress themes have Custom Menus which allow you to quickly and easily build a navigation menu with dropdown items without any code at all! Very cool! 

For Blogger and TypePad users, you have to write the code yourself - bummer - but it can be done! Here is where you can find the code and begin. Although it references sample starting code in TypePad, you use the same code for Blogger blogs!

In WordPress

• Go to Appearance and then Menus to get started.
• Name the Menu at the top.
• Then on the left side you will see where you can add (check off) pages you want to "add to menu".  You an also add a "custom link" that is to a URL such as a post or another site (basically not a page listed).
• You can drag and drop the menus into their position, and put under one another if you want a dropdown effect.
• Save the Menu.
• Then in the upper left side, for default menu, choose the name of the new menu you created.

In Blogger

• You'll go to Layout and Add a Gadget (old Blogger Interface is in Page Elements under Design), and choose the HTML/JavaScript gadget and you want this gadget under the banner.
• Copy and paste in this code to get started (yes, it is for TypePad, but the same code is used for Blogger).
• Use this Q&A article I wrote as a guide on how to customize the dropdown menu further.
• Save Changes when you're done.

In TypePad

• Go to Design and then Content.
• Check the box for the Nav Bar and then to the right side click the pencil to edit the Nav Bar.
• By default you see the Basic nav bar of 10 items, click on Advanced to go to the code.
• Here is where you wil delete what is there and use this code as a base, or continue modifying the sample menu that is already there for you in code.
• Save Changes.
• Then when in the main design/content window, remember to Save Changes again (this is a must of the changes to the Nav Bar will not be saved).

 

Comments

[Reema Khan]

Hi, this tutorial doesn't work for me anymore I think it might be because Blogger changed their html. For instance, the different categories are cut off and some of them don't even appear and the drop down menus don't even show. I used this tutorial for another blog and it worked perfectly but it was before they changed the html...could you please help me out I would really appreciate it! :)

[Kaela]

I am wondering if you can help me figure out how to remove this from my blog. I spent over 3 hours trying to follow the tutorial, and in the end it screwed up my whole entire blog. I just want to remove it and go back to my original design.

[Patricia]

Is there a way to have a drop down menu that will actually hold and organize my blog entries?

[Colleen]

Heather- the menu works great but I have a question. Is it possible to change the font and size of the text in the menu?

[Diva In Me]

I followed your instructions and it's working ok but the drop down menu does not drop down over the post. It is hidden when I hover the cursor over the menu.
Can you please help?

Thank you

Diva In Me

[Miranda]

Hi! I found you via this tutorial: http://www.athometake2.com/2012/10/how-to-create-drop-down-menu-in-blogger.html

It was fantastic and a huge help in adding a drop down menu to my blog. I was wondering...is it possible to add a second sublevel to the code?

Ex: Currently I have a drop down menu for bands on my blog. In the menu are cities. From there, I'd like to add a second menu that pops up and lists all the bands from each city I've featured...but haven't been able to figure it out on my own.

Just thought I'd ask. Thanks!
Miranda

[Elizabeth]

Hi Heather,

Thank you so much for posting this. The instructions were very easy to follow. I was able to add the dropdown menus, but I'm having some trouble getting the spacing between menu items right.

I would like for them to be fairly uniform so the 'About Us' fits on the same line. Can you help me with that?

[Joanne]

I have a question. I used your tutorial to make drop down menus on blogger. When I saved everything the drop down menus are in a vertical position like this:

Home
Book Quotes
Book reviews

I don't want the menus like that. I want them in a horizontal position like this"

Home Book Quotes Book Reviews.

I cant figure out how to change it to look like this. Can you help me please?

Thank You

Joanne

[Techbymak]

Hey Buddy It is working very well in blog.
Thank you for sharing..