How to Create a Drop-Down List Box With Links


Most websites present navigation items using blocks of options that run either across the top of the page or down one of its sides. Because these navigation structures present all available options, they offer a large amount of contextual information. However, they also occupy considerable screen space. Designers with a limited amount of room may instead choose to use drop-down menus containing a list of items that only expands when selected. Create this kind of navigation structure on your web page using HTML and JavaScript.

  • Open your web page and view its code. If you use a text editor, simply open your page in the editor and select the line of code where you want the drop-down menu added. If you use a visual web editor instead (for example Adobe Dreamweaver or Microsoft Expression Web), open your page and click on the page location where you want the drop-down menu to appear. After doing so, change your viewing mode to Code View. This shows you the HTML code that determines the content and appearance of your page.

  • Press the "Enter" key to create a blank line.

  • Copy and paste the following code onto the blank line:

    <form name="link">
    <select name="menu">
    <option selected>Select your link</option>
    <option value="Sample">">Sample website 1</option>
    <option value="Sample">">Sample website 2</option>
    <option value="Sample">">Sample website 3</option>
    <input type="button" onClick="[].value;" value="Go">

  • Update the link parameters to meet your design needs. Enter the default text at the top of the list by modifying the value directly after the <option selected> tag; change the URL of each subsequent item by adjusting the corresponding value parameter; and replace the "Sample website" text with your desired link text. You can also replace the text contained in the value parameter of the <input> tag to update the text that appears on the "Submit" button.

  • Save your web page and then open it in your browser. Select an option from the drop-down list and then click the adjacent button to access the selected item.

Related Searches


  • Photo Credit laptop image by Ewe Degiampietro from
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!