Drop Down Menu Widget For Blogger/BlogSpot Blogs

Blogger Webmaster Tools

One of the most convenient way to display huge lists of links, like BlogRoll or favorite sites etc. is using a drop down menu. It looks like this:

The tool is very useful for webmasters and bloggers, and equally simple is the coding required to put it on your blog/web site.

Follow these simple steps, to add a Drop-Down menu to your blog:
Log in to Blogger, go to "Layout" section, then click on "Add a Gadget", and select it as "HTML/JavaScript"
Now put this code in to it:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>- Your Title - </option>



<option value="http://yourlink.com">Title One</option>
<option value="http://yourlink.com">Title second</option>
<option value="http://yourlink.com">Title Third</option>
<option value="http://bloggerstop.net">Blogger Widgets</option>
</select></form>

Replace the blue and red parts of the code, as per your requirements !

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

54 comments

Write comments

Anonymous

January 03, 2009 2:12 PM delete

Just checking these new smilies....never saw them in any blog ;))

Anonymous

January 04, 2009 12:48 PM delete

you have a great blog...lots to learn.

Chelsea

January 14, 2009 6:01 AM delete

Hi there, thanks for the info! I was wondering if you know of a way to have a drop down menu in blogger but with your own images as the button and drop downs, instead of the drop down it's in now.
Thanks for your time.

Divya Sai

January 14, 2009 12:18 PM delete

Soon there will be a post on multi-level step down menu, you can use that one.

Bean Sprout's Cafe

February 11, 2009 12:22 AM delete

thanks very much :D

Divya Sai

February 11, 2009 5:58 AM delete

Thanks dude !

@ Chelsea,

As I promised, here's the post on multi-level drop-down menu:
Multi Level DropDown Menu For Blogger Blogs

February 23, 2009 10:16 AM delete

yea this is cool stuff 8-}

therock

May 09, 2009 7:10 AM delete

great! this is what I'm looking for. simple and usefull :) thanks man

Kirk

May 12, 2009 3:38 PM delete

Thank you so much for the info!!! I have read all these other Blogs with instructions. I spent hours on getting a drop down menu. None of the others worked.
With your instructions I (not a techie by any means) was able to build a "Drop down Menu" in a few minutes.

Divya Sai

May 12, 2009 3:58 PM delete

I am glad to know that Kirk...thanks for commenting and your feedback !

Shivani

May 17, 2009 4:35 PM delete

thanx buddy ;)
http;//Xperiencemedia.blogspot.com

B Donald

August 31, 2009 3:51 PM delete

Thanks for the drop down menu code, I have tied several others but had issues with all but yours.
Is there a code that can be added so you would be able to use the Configure interface instead of the HTML?

Divya Sai

September 01, 2009 9:49 AM delete

I couldn't get your point Donald, can you plz rephrase it !

Ika

September 14, 2009 12:19 AM delete

Thanks for the info :D

TJ Sanders

September 17, 2009 4:31 PM delete

Thanks for the info! On my blog, when I navigate throughout the choices within my dropdown menu, I'd like it if it opens up the page I selected on the same page. You have it set up to when I select something else, it opens up in a new page.

What part of the cod eneeds to be edited to fix this?

Thanks!

Divya Sai

September 22, 2009 7:16 AM delete

Hello Sanders

In the code above change this line:

onchange="window.open(this.options[this.selectedIndex].value,'_blank')"

to this:

onchange="window.open(this.options[this.selectedIndex].value,'_self')"

Anonymous

September 26, 2009 4:42 PM delete

Just a quick question... what if I don't want the menu option to go to link?
I just want it to open some information.
For example, if you click 'hi' in the dropdown menu, a piece of text appears saying 'hello'

Divya Sai

September 27, 2009 3:50 AM delete

@PC411

you mean something like a pop-up?

rach

November 20, 2009 1:42 AM delete

hi, thanks so much for the awesome tips.

Sai @ Blogger Help

November 20, 2009 1:58 AM delete

You are most welcome Stan !

Anonymous

January 30, 2010 12:54 PM delete

I need Go button After selecting.. ;;)
please can you help for this?

Divya Sai

January 30, 2010 1:05 PM delete

If there's no relation between the "go" button and the selected drop-down item, then you can simply add a HTML button button after the menu.

Anonymous

February 05, 2010 10:55 AM delete

I like this single-level drop-down menu (I am only using it as a basic archive for my blog posts, so I don't need more levels), but I would like be able to change the background and text colors to match my blog. Is that possible?

Anonymous

February 05, 2010 11:06 AM delete

...I was also wondering if it is possible to center it, or somehow change the padding, so that the menu does not appear on the left side of my sidebar.

Divya Sai

February 07, 2010 10:17 AM delete

Hey Caroline,

This widget is a simple html based widget, to add a more customizable widget, use this one:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Instructions are really simple, and in case of doubts feel free to comment/mail me.

Taimur Asghar

April 04, 2010 2:58 PM delete

awesome ;))

KING SINGH

April 10, 2010 4:48 AM delete

thanks for the valuable post !

www.king--singh.blogspot.com ! I got help for it ! i hope , in future more valuable posts will be here for blogger !

Rachel

April 19, 2010 9:04 AM delete

Is it possible to change the font and colour within the widget?

Sai - Blogger Widgets

April 19, 2010 12:16 PM delete

For a customized widget, use this widget:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Clair Boone @ www.mummydeals.org

April 22, 2010 4:14 PM delete

I really want to install this but have a feeling it's over my head!

Skip2MyLou

April 23, 2010 9:32 PM delete

hello. how can i make many of them in a single line? can i align them? thanks. your blog really helps...

Mafia Wars

April 27, 2010 2:34 AM delete

thank you very much i was looking for this widget, very cool site

Livia

April 28, 2010 10:19 PM delete

thank you very much for these instructions!

Jacqueline

May 14, 2010 1:43 AM delete

This fabulous widget worked like a charm...so easily applied! Thank you so much, truly appreciate your sharing and God bless!

Daudara

June 23, 2010 8:17 AM delete

I want to use it on wordpress. Is it possible? what do i need to change to make it work?

The Funky Bunch

July 03, 2010 6:12 PM delete

Ok, so I was able to create the drop down menu...but when I click on one of the links it doesn't take me anywhere. So how do I make it so it takes you to a specific page of my blog. Thanks so much for your help!

Sai - Blogger Help

July 10, 2010 3:15 PM delete

Instead of "http://yourlink.com" type the url-address of the pages/websites - whatever you want.

Anonymous

September 01, 2010 7:46 AM delete

i would like to have the background of that drop down menu in some other color like black. for example see this link

http://www.basicslife.in/store-locator.php

in tha above link there s a drop down menu to select cities. it is in a kinnd of black colour...is it posible to change thw white background of dropdown menu?

Edward Roberts Jr.

November 01, 2010 10:33 AM delete

Thanks for this. Very helpful! many thanks again!!

thesahmydotcom

February 09, 2011 6:36 PM delete

thanks for the above info, what if I want to adjust its size, horizontally and the background color. Also, can your comments here be sort, new to old order.

Anonymous

February 25, 2011 1:50 AM delete

how to place a small icon before the link items lying in the drop down menu?

Cookwell

March 11, 2011 9:06 PM delete

Thank you we are using it.

Anonymous

March 23, 2011 8:21 AM delete

hey i tried adding this , but i dont know how to link it to posts. For example : If the title is search by ingredient. and i click on chocolate ( this should take me to all recipes with chocolate in it ) how do i link chocolate to the recipes ?
what part of the code do i have to edit and what should i add ?

Edith

March 28, 2011 7:04 AM delete

I had tried this and it works!!! THanks so much.

But can I ask you another question, how do I remove those in between lines.

I needed the drop down menu to be not so space out. Is this possible?

http://preciousmoments66.blogspot.com/

Hope to hear from you.

Cheers

Sai - Blogger Help

March 28, 2011 10:32 AM delete

Yes that is possible, instead of adding widgets again and again use ONLY 1 widget and add all the codes for different drop-down menus in that single widget.
So, after every drop down menu, you have to paste the same code (from <form... to &lt.form>) with new title and new links.

IMP: And instead of this code:
<option>- Your Title - </option>

Use this one:
<h2 class='title'>Asian Delights</h2>

Edith

March 28, 2011 8:07 PM delete

Thanks Sai for your prompt reply. Pardon me as I am not IT savvy.

Am I right to say that I have to delete all the HTML/JavaScript that I had added?

How do I go about it?

Perhaps we can communicate via my email.

THanks.

Anonymous

April 07, 2011 5:20 AM delete

I'll be adding a lot of links to my drop down menu can this drop down a ways and then scroll?

Anonymous

April 07, 2011 6:39 AM delete

Also I would like to make all my dropdown menus the same width would you happen to know the code that accomplishes that?

Thanks

Eloktavian

July 08, 2011 3:48 AM delete

Very Easy... Thx 4 tutorial :)

chimi08

August 19, 2011 9:29 PM delete

wah guys could someone help me pls. Is it possible to make a dropdownlist in my lyrics page? What i want is when you click the lyrics tab, letters a-z will be the only ones visible. Wah..
Here's my lyrics page

http://chimi08.blogspot.com/p/songs_17.html

thanks and more power!
Circle of friendly friendswah guys could someone help me pls. Is it possible to make a dropdownlist in my lyrics page? What i want is when you click the lyrics tab, letters a-z will be the only ones visible. Wah..
Here's my lyrics page

http://chimi08.blogspot.com/p/songs_17.html

thanks and more power!
Circle of friendly friends