January 3, 2009

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 !


55 comments:

Jerry ! said...

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

carlota said...

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

Divya Sai said...

:)

chelsea said...

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

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

Bean Sprout's Cafe said...

thanks very much :D

Divya Sai said...

Thanks dude !

@ Chelsea,

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

GK said...

yea this is cool stuff 8-}

therock said...

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

Kirk said...

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

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

Shivani said...

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

B Donald said...

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

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

Ika said...

Thanks for the info :D

TJ Sanders said...

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

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

PC411, BITCHES! said...

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

@PC411

you mean something like a pop-up?

Stan said...

hi, thanks so much for the awesome tips.

Sai @ Blogger Help said...

You are most welcome Stan !

SymbianFile said...

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

Divya Sai said...

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.

Caroline said...

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?

Caroline said...

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

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.

Bloggers said...

awesome ;))

KING SINGH said...

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

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

Sai - Blogger Widgets said...

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

Clair said...

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

JVSTREAM said...

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

Mafia Wars said...

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

Livia said...

thank you very much for these instructions!

Jacqueline said...

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

Noname said...

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

The Funky Bunch said...

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

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

Anonymous said...

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

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

Lala said...

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.

d said...

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

Prabha R said...

Thank you we are using it.

Anonymous said...

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

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

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

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.

Nicole Gattinger said...

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

Nicole Gattinger said...

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

Very Easy... Thx 4 tutorial :)

chimi08 said...

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

Calgary Web Design said...

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

john ryan said...

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

For Tips and Tricks said...

This is amazing Dear !

But how to open it in the same window ?

Chiyo said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy