Add Custom Drop Down Menu

This tricks/tips for creating custom drop down menu
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.

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.

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.