Dropdown navigation

[Paul M]

Hi
I want to add a drop down box so when the user selects a drop down item it
sends the user to a URL. I can acheave this using a form but the form seems
to have an uwanted invisible border/padding which creates to much space
around it. I also dont want a submit button , I want the user to click on
the menu highlighted item and it automaticaly sends them to the URL

Thanks
Paul M

 

[Steve Easton]

Here's a sample:
<form>
<p align="center"><b>Select a Site or Function: </b><select id="setit">
<option value="">Select one</option>
<option value="http://www.altavista.com">AltaVista</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select><input type="button" value="Go"
onclick="javascript:window.open(setit.options[setit.selectedIndex].value);"></input>
</form>

You *must* use the form tag for cross browser compatibility.
It is "highly recommended" that you use the Go button, because if you use an onselect or onchange
function and people are navigating with the keyboard and not the mouse ,they will never be able to
get past the first item in the dropdown.


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Jon Spivey]

Hi Paul,
you should be able to get rid of the space with some CSS,
<style type="text/css">
form{
margin:0;
}
</style>

If that still doesn't work try putting your form tags outside your tables,
eg
<form.....
<table>
.....your page
</table>
</form>

To lose the button make your dropdown like this
<select
onchange="location.href=this.options[this.options.selectedIndex].value;">
<option value="">Choose a Site</option>
<option value="http://site1.com">Go To Site 1</option>
<option value="http://site2.com">Go To Site 2</option>
etc

 

[Paul M]

Thanks Guys
Sorted
Paul M

Hi Paul,
you should be able to get rid of the space with some CSS,
<style type="text/css">
form{
margin:0;
}
</style>

If that still doesn't work try putting your form tags outside your tables,
eg
<form.....
<table>
....your page
</table>
</form>

To lose the button make your dropdown like this
<select
onchange="location.href=this.options[this.options.selectedIndex].value;">
<option value="">Choose a Site</option>
<option value="http://site1.com">Go To Site 1</option>
<option value="http://site2.com">Go To Site 2</option>
etc

--
Cheers,
Jon
Microsoft MVP

Hi
I want to add a drop down box so when the user selects a drop down item it
sends the user to a URL. I can acheave this using a form but the form
seems
to have an uwanted invisible border/padding which creates to much space
around it. I also dont want a submit button , I want the user to click on
the menu highlighted item and it automaticaly sends them to the URL

Thanks
Paul M