How to Add Drop-Downs

Make it easier for people to navigate your website by adding a drop-down menu.

The fastest and easiest way to add a drop-down menu to your website is to use a "wizard" to generate the HTML code or JavaScript. Online wizards take the URL of your site and generate code and script, which you then copy and paste to your site. When a visitor clicks the menu on one of your web pages, it reveals a linked list of web pages. Using a wizard to generate your drop-down menu is a simple step-by-step process.

Things You'll Need

• Plain-text editor

Instructions

1. Choose an online drop-down menu wizard, such as those found at TheSiteWizard.com or HypergURL. Select the number of items that you want to appear in your drop down menu, then click "Next Step."

2. Enter the main URL for your website, omitting the "http://" at the beginning of the URL and, if present, the filename of your home page. For example, if your home page were http://www.mysite.com/index.html, the main URL would be www.mysite.com.

3. Enter the name and relative path for each page that you want included in the drop-down menu. The relative path is that part of the URL which comes after the domain name and first slash, such as pagename.html

4. If you select the "JavaScript with Perl" option in the advanced options section, enter the additional information requested by the wizard. Check the box to accept the terms of use. Click "Generate" to get the code for the drop-down menu. Copy the text in the "web page code" section and paste it into each web page where you want the menu to appear.

5. Copy the text in the "JavaScript Menu Code" section into a plain-text editor such as Notepad. Save the text file with the name chgoto.js. Upload the file to the main directory of your web page.

Tips & Warnings

• Copy your website's code into a web page creator program and apply the changes there first to test changes or additions before making them public.

• Paste the HTML code for the drop-down menu into a plain-text editor such as Notepad and save the file on your computer in case you need to reinstall the menu.

• Always download and save the website's original HTML code before making changes to the site. Restore your original code if you make an error when adding code to your site.

References

• The Site Wizard: Drop Down Navigation Menu Wizard

Resources

• HyperGURL: Drop Down Generator