Simple HTML Drop Down Menu Generator

Description

  • The following wizard generates the code necessary for your own simple drop down menu. Each option on your menu will link to a selected page. Options are also given for you to select the colors and fonts.

Steps

  1. Fill in the information required for your drop down menu
  2. Generate the HTML and JavaScript code for your menu (button at bottom)
  3. You can preview your script (button at bottom)
  4. Copy and Paste the Source Code into your HTML page

Example

Note

  • If you choose Page changes when menu changes, no action can occur for the first Link Address
  • You can leave Link Address blank on the lines where you want the text entry to act as a divider or a menu header


When and how to change the page


Menu Properties
Menu Name:
(change menu name if multiple menus on one page)
Custom Target:
Target Name:
Dropdown Menu Entries
Text Shown Link Address



Custom Colors/Styles

(Check the above box to enable these Style Sheet options)
Text Color Background Color
[pick] [pick]
Font Family Custom Font

Font Style Font Size
pt



Source Code
JavaScript

Comments

September 24, 2010 - 1:33pm — ricocheting

Best bet would be put the entire thing inside a div tag with the necessary positioning CSS.

<div style="position:absolute; top:0px; left:5px">
drop down menu code
</div>

November 12, 2010 - 9:44pm — Anonymous

Ok, One of my text entries in the drop down list is long. The box then stretches too far to accommodate the text, even running off the edge of the screen! How do you make it so that the box is locked in a specific width and the text adjusts itself to form 2 lines? Shortening the title of my text is not an option for me, but breaking it into two lines is ok. Please, can you help?

November 15, 2010 - 9:04pm — ricocheting

There is no way to wrap it to use 2 lines. you can however force a certain width to the select box. The effect setting a width has is different depending on the browser. Add a style="width:200px;" property to the <select> tag like <select name="menu" style="width:200px;"> (will vary depending on which type of menu you are using)

August 27, 2012 - 10:01am — mchristian

How do you put multiple dropdowns side by side? When I try to do it the GO/Submit button no longer works.

August 28, 2012 - 10:54am — ricocheting

As long as you don't put the second dropdown inside the of the first, it should work fine. eg; make sure you completely finish the code for the first before pasting the second.

April 19, 2013 - 8:38am — megan

when you say add it to your html do you mean your theme or can you just put it into your description?

April 19, 2013 - 12:50pm — ricocheting

You should be able to put it directly into your description as long as the description allows custom HTML and Javascript.

April 19, 2013 - 10:13pm — chelly

my button isn't working... I have the menu and everything but when I click go nothing happens!
here's my blog if you want to see what I mean: lovely--skins.tumblr.com thanks!

April 20, 2013 - 10:13pm — ricocheting

What you have currently works for me. I'm guessing you might have changed it since you asked this question. If you use multiple menus with the "Go" button, you will need to change the "Menu Name:" option on each menu.