Drop Down Menu Widget For Blogger/BlogSpot Blogs

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>

<!-- change the links with your own -->
<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 !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

55 comments

Write comments
Jerry !
January 03, 2009 2:12 PM delete

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

Reply
avatar
January 04, 2009 12:48 PM delete

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

Reply
avatar
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.

Reply
avatar
January 14, 2009 12:18 PM delete

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

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

Reply
avatar
GK
February 23, 2009 10:16 AM delete

yea this is cool stuff 8-}

Reply
avatar
May 09, 2009 7:10 AM delete

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

Reply
avatar
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.

Reply
avatar
May 12, 2009 3:58 PM delete

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

Reply
avatar
May 17, 2009 4:35 PM delete

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

Reply
avatar
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?

Reply
avatar
September 01, 2009 9:49 AM delete

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

Reply
avatar
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!

Reply
avatar
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')"

Reply
avatar
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'

Reply
avatar
September 27, 2009 3:50 AM delete

@PC411

you mean something like a pop-up?

Reply
avatar
November 20, 2009 1:42 AM delete

hi, thanks so much for the awesome tips.

Reply
avatar
January 30, 2010 12:54 PM delete

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

Reply
avatar
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.

Reply
avatar
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?

Reply
avatar
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.

Reply
avatar
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.

Reply
avatar
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 !

Reply
avatar
April 19, 2010 9:04 AM delete

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

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

Reply
avatar
April 22, 2010 4:14 PM delete

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

Reply
avatar
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...

Reply
avatar
April 27, 2010 2:34 AM delete

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

Reply
avatar
April 28, 2010 10:19 PM delete

thank you very much for these instructions!

Reply
avatar
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!

Reply
avatar
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?

Reply
avatar
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!

Reply
avatar
July 10, 2010 3:15 PM delete

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

Reply
avatar
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?

Reply
avatar
November 01, 2010 10:33 AM delete

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

Reply
avatar
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.

Reply
avatar
d
February 25, 2011 1:50 AM delete

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

Reply
avatar
March 11, 2011 9:06 PM delete

Thank you we are using it.

Reply
avatar
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 ?

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

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

Reply
avatar
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.

Reply
avatar
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?

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

Reply
avatar
July 08, 2011 3:48 AM delete

Very Easy... Thx 4 tutorial :)

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

Reply
avatar
August 25, 2011 5:57 AM delete

This is a helpful post. Thanks for sharing this tutorial. Looking forward to reading more of your post.

Reply
avatar
September 16, 2011 11:18 AM delete

i just want to ask on how to disable link on the code? i just need the list without link on each title. Thanks!

Reply
avatar
October 26, 2011 2:36 PM delete

This is amazing Dear !

But how to open it in the same window ?

Reply
avatar
June 05, 2012 10:20 AM delete

Hey, I got a quick question. I used this code to build a drop-down menu, but how can I change its width?

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon