Dropdown menus are a good way to direct your visitors around your website. They take up a lot less space on your pages and are very simple to use. The only problem with these types of menus is that your visitor must be using a browser that supports JavaScript and the JavaScript must be active. Some pople say that when you use this type of menu you should also provide a text link menu at the bottom of each page for those that aren't using a JavaScript capable browser. This way all visitors can view your pages.
There isn't any limit to how many of these menus you can use on each page and there isn't any limit to how many options each menu can use. I have some of these on another site with more than 150 options.
Another great thing about this type of menu is that there are many special effects you can add to them that will enhance the looks of your pages and/or make them easier to fit on the page. Check out my SpecialFx page to see some of the effects you can add to these menus (and other form elements) using Cascading Style Sheets.
On this page I'll show you some basic enhancements you can do with these menus. For instance the SUBMIT button doesn't always have to be on the right-side of the menu like you see it in most places on the Web. It can be on the left, right, top or bottom. In fact it doesn't even have to be near the menu at all. It could be at the bottom of the page while the menu is at the top and vise versa or on the left-side of the page while the menu is on the right-side. It's up to you to decide.
The only important thing to remember is that all parts of the form must be between the <form>...</form> tag pair. You can even add text, images and tables in between these tags. These menus are very flexible.
Below is an average JavaScript dropdown menu with the button on the left. To get the button on the left you must place the <input> tag before the <select> tag in your HTML source code.
Below is an average JavaScript dropdown menu with the button on the top. To get the button on the top you must place the <input> tag before the <select> tag in your HTML source code and seperate them with a <br> line break tag so that the select box will drop below the button.
Below is an average JavaScript dropdown menu with the button on the right. To get the button on the right you must place the <input> tag after the <select> tag in your HTML source code.
Below is an average JavaScript dropdown menu with the button on the bottom. To get the button on the bottom you must place the <input> tag after the <select> tag in your HTML source code and seperate them with a <br> line break tag so that the button will drop below the select box.
In left and right examples above you'll notice that the button was right up against the select box. In otherwords, there is no space between them. This can easily be remedied by simply placing a non-breaking space between them or by placing the <input> and <select> tags on seperate lines in your source code. After typing in one of these tags press the "ENTER" key to put them on seperate lines. Below is an example.
The button doesn't have to say "GO!" either. It can read anything you want it to. Simply add what you want it to say in the value="" element in the <input> like this <input value="Find">. But be careful, the more you put in there the wider the button becomes.
Don't bother trying to use width="?", height="?" or size="?" to try to size the button. It simply won't work. Other than using more or less characters to adjust the width the only other way is to use Cascading Style Sheets. To see this take a look at my SpecialFx page.
The Javascript dropdown menu above is set up to open its link options this window. But, it doesn't have to be that way. There are several other options that you can use. Some will open links in a different frame in a framed website, another might open them in a new browser window while yet another might open them in a JavaScript popup window. It all depends on how the script is written.
Below is another way of displaying your dropdown menu. Here I have added size="5" to the <select> tag so that 5 options will show at one time.
There are many other functions you can add to these as well.
Take a look at my SpecialFx Page. It will show you how to add colors and different fonts etc. to this menu.
Home Page This Page Was Last Updated: