About   All Tips   Tips by Category   Tips by Ability   Help!

Custom Drop Down Menus - Intermediate

Have you seen the new drop down menus at the top of my sidebar? The ones for beginner tips, etc.? I only recently learned how to do these. They’re surprisingly simple and require no template tweaking, as they are created as an HTML gadget. You do have to work with HTML, making this an intermediate tip.

To create a custom drop-down menu:

1. Copy and paste the following code into notepad or a new word document:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>Title of Drop Down Menu<option value="http://link1.com"/>Link 1 Title<option value="http://link2.com"/>Link 2 Title</select>

2. Replace the colored sections with your own information. The above code only includes two links. You may add more links by adding the following code after the current links (in orange and blue above) and before </select>

<option value="http://newlink.com"/>New Link Title

3. Go to your Page Elements page and click on ‘add a gadget’. Select ‘HTML/Javascript’.

4. Copy and paste the code you modified in step 2 into the gadget box.

5. Save.

For example:

Here's how I created my ‘Beginner Tips’ drop down menu. *FYI: My actual beginner tips drop down menu contains several links. For this demonstration, I'm only using the top four.

1. First, I copied the code from step 1 above and pasted it into a blank Word document. Then I replaced the colored info with my own info. This is what it looked like:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>Beginner Tips
<option value="http://sneakymommablogdesign.blogspot.com/2009/02/blog-tip-tuesday-backing-up-your-blog.html"/>Backing Up Your Blog
<option value="http://sneakymommablogdesign.blogspot.com/2009/04/blogger-nav-bar.html"/>Blogger Nav Bar</select>

2. I copied the code in step two and pasted it twice (because I wanted to add two more links) in my newly created code before the </select> tag. Then I replaced the red words with my own info, which made my code look like this:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>Beginner Tips
<option value="http://sneakymommablogdesign.blogspot.com/2009/02/blog-tip-tuesday-backing-up-your-blog.html"/>Backing Up Your Blog
<option value="http://sneakymommablogdesign.blogspot.com/2009/04/blogger-nav-bar.html"/>Blogger Nav Bar
<option value="http://sneakymommablogdesign.blogspot.com/2009/01/see-who-visits-your-blog.html"/>Blog Statistics
<option value="http://sneakymommablogdesign.blogspot.com/2009/03/centering-sidebar-images.html"/>Centering HTML Images</select>

3. I copied the entire code that I created in Word.

4. I added an HTML gadget to my sidebar and pasted the code into the big box. Then I saved it.

I suggest starting simple. Try creating a drop down menu with just a few links. Once you have successfully created a working drop down menu, then proceed to making a longer one. The fewer links you have to work with, the easier it will be to spot mistakes.

The width of your drop down menu depends upon how many characters (letters) are in your longest title. Your titles MUST NOT exceed the width of your sidebar, or else the drop down feature will not work. You may have to play around with the lengths of your titles in order to make it fit.

For more help with drop down menus, please click here to view a tutorial over at Technical Bliss.

Related Posts:
Drop Down Menus- Labels (Advanced)
Drop Down Menus- Archives

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

18 comments:

AlpHa Buttonpusher said...

Oooh this is cool.
Thanks.

xoxo

Chell said...

Thank you! I totally love your blog! Without you I would be so lost!

Butterflygirlms Blog Designs (Heather) said...

Great! I will definitely be using this feature in the near future :0 Thanks for sharing your tip!

Susie Jefferson said...

Aaah, CLEVER! Just what I need for those longer and longer lists that take up all the sidebar.

Thanks so much!

Becca said...

ABSOLUTELY WONDERFUL!
I know, I know, I left a comment before and no I’m not a blog stalker.
I don’t spend my life on blogs BUT I could become addicted to yours.
I’m not computer savvy and your blog is priceless to me.
Thanks again, FRONT DOOR JUNKIN’

mormonhermitmom said...

Wow!

Rochelle said...

I have been dyinggg to know how to do this...I'm sooooo excited!!!!!! :) Thank you, from the bottom of my heart!

Cathy said...

I have learned so much from you...the easiest, clearest directions. I am hoping you can help me with two problems. One - after I changed designs for fall, I tried to change the colors in my html and everything changed except the sidebar titles. No matter what I do, they have stayed blue. The color in the html says brown, but they are still blue. Any suggestions?

Two - do you know how to make column dividers to separate columns when you make a three column template. I can make the template perfectly, but I don't like the columns running next to each other without a dividing line. It's too messy looking. Just wondering. I haven't done it on my "real" blog yet, as I don't like the look. It's on my practice one.

Thanks again!

Cathy
www.watchingovercathy.blogspot.com
or
nascarnonna@comcast.net

Whimsical Creations said...

That is just cool! Thank you for the tutorial!

Chell said...

Thanks so much for all your great posts! I used your blog to help me make-over my blog. I also grabbed your button & posted it on my sight so others can see all you helpful posts!

MemoryKeeper said...

This totally ROCKS! Thanks so much!

Jeanette

MemoryKeeper said...

I did a really simplified version of this, and gave you a shout out at my blog! Thanks again!

Jeanette

Susie Jefferson said...

You are a total lifesaver! How I needed this one!

I have to declutter my blogs - the sidebars are getting totally out of control - and this is going to help SO much. Thank you.

Now, do you have any thoughts on this one: blogs where they ask you to take their button but don't provide a code, so you copy the pic then Add A Gadget > Add A Picture and put in the code in thr box above.

Is there any way to get these into a scrolling gadget as per your other excellent tip? I have half my blog buttons scrolling; the others are pictures, all straggling down the sidebar. This would be a real help if you can figure out a way...

Susie
firstfloorflat1-blog@yahoo.co.uk
http://1stfloorflat.blogspot.com/

Mimi said...

I just found your blog.....it may be a lifesaver to me seeing I am so new to blogging! Thanks for sharing all this information.

lucienalta said...

OMG, sooooo close. I am loving your tutorial but as I grow old, so grows my brain. Can you take a look at my blog and tell me where I went wrong?

http://littlebits.blogspot.com

Nggapriel said...

great post, thanks :)

Bengal Business said...

The linkies dont work:(

Jill @ Sneaky Momma said...

@ Bengal Business Try again from the very beginning. If you leave off one tiny character, the links will not work. :)