Dropdown navigation

P

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
 
S

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
 
J

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
 
P

Paul M

Thanks Guys
Sorted
Paul M
Jon Spivey said:
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

Paul M said:
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
Click to expand...
Click to expand...
 
Top