Using HTML drop down menus is a great way to break your site’s content down and help visitors to your site navigate around a little easier.  I have used these on a few of my sites and usually included them at the end of my header.php file.  On the site they show up right below the header and right above the content.

Here is a demo link with examples of a couple different menu options.  You are free to copy the code from the demos or I will be explaining more about the code below.

First, I will explain how to add a single drop down menu to your site.  Here is an example of what the code will look like.

<form name="Demo">
<select style="margin-top:10px; margin-right:20px; margin-left:10px;
font-size:12px;color:#000000;font-weight:bold;font-family:verdana;
background-color:#ffffff;"name="menu" onChange="location=document.
Demo.menu.options[document.Demo.menu.selectedIndex].value;">

<option value=" ">Drop Down Menu Demo</option>

<option value="http://">Demo Link</option>

</select>

</form>

There are a couple aspects of the code that must be addressed so it will work correctly.  The form can be named anything, however you can’t use spaces (BaseballCards = yes Baseball Cards = no).  Also make sure you include the form name in the two other locations that I highlighted in red.  When using multiple forms you will need to name them different for the menus to work correctly.

The first <option value= is going to act as the ‘title’ of your menu, I don’t usually add a link here.  You can add as many links as you wish.  The scrolling kicks in after 20 links are added to the menu.  The width of the menu is determined by the longest piece of text you include.  So if the title of your menu is Socks but you include a link for White Stripped Knee Hight Basketball Socks, you will have a really wide menu.  There are various options, such as font color and margins, that you can tweak to make the menu fit your site.

Have multiple menus is pretty easy to do.  Like I said above make sure you name each one different or it won’t work correctly.  To create multiple drop down menus in a column you simply recreate the code for the number of menus you want.  If you take a look at my demo link you can see it in action.  This would work great on siebars where horizontal space is at a minimum.

Having the menus in a row takes a little more code.  Here is what the code will look like for two menus in a row and here is the demo link.

<table>

<tr>

<td>

<form name="Demo">
<select style="margin-top:10px; margin-right:20px; margin-left:10px;
font-size:12px;color:#000000;font-weight:bold;font-family:verdana;
background-color:#ffffff;"name="menu" onChange="location=document.
Demo.menu.options[document.Demo.menu.selectedIndex].value;">

<option value=" ">Drop Down Menu Demo</option>

<option value="http://">Demo Link</option>

</select>

</form>

</td>

<td>

<form name="Demo2">
<select style="margin-top:10px; margin-right:20px; margin-left:10px;
font-size:12px;color:#000000;font-weight:bold;font-family:verdana;
background-color:#ffffff;"name="menu" onChange="location=document.
Demo2.menu.options[document.Demo2.menu.selectedIndex].value;">

<option value=" ">Drop Down Menu Demo</option>

<option value="http://">Demo Link</option>

</select>

</form>

</td>

</tr>

</table>

The two menus are wrapped in a <table> <tr> and a the menus in a <td>.  If you would like to add aditional menus to this you will need to copy from the <td> to the </td> and pasted it before the </tr> at the bottom.

If you have any questions or problems feel free to post any coments below or contact me directly.

This post is tagged HTML, Tips