This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
how to link a drop down menu bar to other pages

How do I make a code to link a drop down menu with different catagories to other pages within my website?

Re: how to link a drop down menu bar to other pages

There are dozens of different dropdown menus available andthe methods of linking pages can be very different, from one to another. But you haven't mentioned which one you are talking about.

If you have it on your web site or a test page, provide us with the URL. And tell us where you got the dropdown menu from.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Re: how to link a drop down menu bar to other pages

I included the actual web page I was talking about.
http://www.1stonsceneonline.com/id30.html

I used the form found on Bravenet to build it as you see it there. I just don't remember how to link the different topics within the drop down menu to another page in the site or a place where many different produts can be listed per each catagory. Thank you.

Browser: IE

Re: how to link a drop down menu bar to other pages

The dropdown menu you chose is more commonly used in a submit form. When it's used that way, the selection is static until a submit button is pressed. Then the form processor extracts the current selection. It can be made to work as a navigation tool, without a submit button, but it still needs to be wrapped in a "form" tag.

To make it work without a submit button, you need to add a small piece of Javascript. Below is and example. A "form" is wrapped around the "select" code and then a small piece of Javascript is added as a "0nChange" event to the "select" tag. When a visitors selects an item from the menu, this signals a change that selects the value fro the selection. The option "_top" opens the specified page in the current browser window.

Code:
<form action="../">
<select 0nChange="window.open(this.options[this.selectedIndex].value,'<span style="font-weight:bold;">_top</span>')">
<option value="http://www.1stonsceneonline.com/SCBA.html">SCBA</option>
<option value="http://www.1stonsceneonline.com/TURNOUT.html">TURNOUT</option>
<option value="http://www.1stonsceneonline.com/FOOTWEAR.html">FOOTWEAR</option>
<option value="http://www.1stonsceneonline.com/EMS.html">EMS</option>
<option value="http://www.1stonsceneonline.com/RESCUE.html">RESCUE</option>
<option value="http://www.1stonsceneonline.com/CONSTRUCTION.html">CONSTRUCTION</option>
<option value="http://www.1stonsceneonline.com/GAS DETECTION.html">GAS DETECTION</option>
<option value="http://www.1stonsceneonline.com/LIGHTBARS_SIRENS.html">LIGHTBARS/SIRENS</option>
<option value="http://www.1stonsceneonline.com/UNIFORMS.html">UNIFORMS</option>
</select>
</form>


To do the same operation, but open the specified site in a new window or tab, you would use the "_blank" option.

Code:
<form action="../">
<select 0nChange="window.open(this.options[this.selectedIndex].value,'<span style="font-weight:bold;">_blank</span>')">
<option value="http://www.1stonsceneonline.com/SCBA.html">SCBA</option>
<option value="http://www.1stonsceneonline.com/TURNOUT.html">TURNOUT</option>
<option value="http://www.1stonsceneonline.com/FOOTWEAR.html">FOOTWEAR</option>
<option value="http://www.1stonsceneonline.com/EMS.html">EMS</option>
<option value="http://www.1stonsceneonline.com/RESCUE.html">RESCUE</option>
<option value="http://www.1stonsceneonline.com/CONSTRUCTION.html">CONSTRUCTION</option>
<option value="http://www.1stonsceneonline.com/GAS DETECTION.html">GAS DETECTION</option>
<option value="http://www.1stonsceneonline.com/LIGHTBARS_SIRENS.html">LIGHTBARS/SIRENS</option>
<option value="http://www.1stonsceneonline.com/UNIFORMS.html">UNIFORMS</option>
</select>
</form>


Of course, adjust the URLs and page names to suit your own needs. A google search on the string "form select javascript" will also get you lots of information about other ways the "select" can be used.

Note that, in the above code, do not use a copy/paste directly from the page. The forum tends to strip out event specifications so the "0nChange" event starts with a "zero" instead of the letter "O". Replace the "zero" with the letter "O" before you use the code.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Re: how to link a drop down menu bar to other pages

Can you teach me this step by step? It's like learning a foreign language....I only know the very basics...this string you noted: