How to Create A Drop Box
One of the biggest problems facing a website developer is how to condense large amounts of information and huge numbers of links into a small, viewable area that a user can easily navigate without getting lost. An easy way to put many different links into one small space is to create a drop-down menu box. When a user clicks on the box, it expands to reveal all of the links contained in the menu. You can create a drop-down menu by adding in a few lines of Javascript code to your web page.
Other People Are Reading
Instructions
-
-
1
Open your web browsing program and log in to your website's HTML management tool, or instead open a text file if you upload HTML files to your website via an FTP program. Save the text file with the ".html" extension to convert it to an HTML file.
-
2
Type in the opening <head> and closing </head> HTML tag at the top of the file. Let the web browser know that you are going to be using Javascript code by placing the <script language=JavaScript> tag in anywhere inside the <head> tag. Press the enter key to navigate to the next line inside the <head> tag.
-
-
3
Add the Javascript "Navigate" function inside the <head> tag by typing out "function Navigate () {." Hit the enter key again to move down to the next line and use the "NavSelect" function to setup the drop-down box by typing out "var dropdown = NavSelect.selectedIndex;."
-
4
Hit the enter key again and type out "location.href = NavSelect.options[dropdown].value;." End the navigate function by placing an ending "}" symbol on the next line. Let the browser know that the Javascript code has ended by going to the next line and typing in </script>.
-
5
Go down another line and add in the opening <body> and closing </body> tags. Create the actual drop down box itself inside the <body> tag by typing out <select name="NavSelect" onChange="Navigate(this.form")>. Go down to the next line and add in the website to link to and the words you want to be displayed in the drop down menu by using the "option" function such as "<option value="http://www.ehow.com">Ehow.com." Add in as many extra options as you want in the drop down menu by going down to the next line and adding in another instance of the "option" function.
-
6
Finish the code for the drop-down box by entering in the closing </select> tag.
-
1
Tips & Warnings
There is no limit to the number of options you can place in a drop down box, but if you place too many, the user may have to scroll down to view them all. If you have more then 10 or 15 options in the menu, you may want to consider breaking the options into two or more drop-down menus.
References
Resources
- Photo Credit BrianSolis
