Menu List With - JavaScript Form

Menu list option allows you to pre-set links while users can easily find relevant sites. You can put the list of many links as possible. Users simply select their favorite Web sites and click "GO" button to go to that page.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="JavaScript">

<!-- Begin
function go_to_station() {
if (document.stationform.stationselect.options[0].selected) {
window.location.href = "http://www.google.com";}
else if (document.stationform.stationselect.options[1].selected) {
window.location.href = "http://www.road2webmaster.com";}
else if (document.stationform.stationselect.options[2].selected) {
window.location.href = "http://www.microsoft.com";}
else if (document.stationform.stationselect.options[3].selected) {
window.location.href = "http://www.yahoo.com";}
else if (document.stationform.stationselect.options[4].selected) {
window.location.href = "http://www.netscape.com";}
else if (document.stationform.stationselect.options[5].selected) {
window.location.href = "http://msdn.microsoft.com";}
return true;
}
function textValue() {
var stationInteger, stationString
stationInteger=document.stationform.stationselect.selectedIndex
stationString=document.stationform.stationselect.options[stationInteger].text
document.stationform.stationtext.value = "Go to " + stationString +"!"
}
// End -->
</script>

Insert this code into <body> tags

<center>
<table align="center" bgcolor="#b8860b" cellspacing="2" cellpadding="2" border="2">
<tr>
    <td align="center">
<table border="0" cellspacing="2" cellpadding="2" align="CENTER" valign="MIDDLE" bgcolor="#deb887"><tr><td align="CENTER" valign="MIDDLE"><form name="stationform">
<select name="stationselect" onchange="textValue()" multiple size="5">
<option>Google Home Page
<option>R2W Home Page
<option>Microsoft Home Page
<option>Yahoo
<option>Netscape
<option>Developer's Page
</select></td></tr>
<tr><td align="CENTER" valign="MIDDLE">
<input type="button" name="stationbutton" value="Go!" onclick="go_to_station()">
</td></tr>
<tr><td align="CENTER" valign="MIDDLE"><input type="text" name="stationtext" value="" size="35" maxlength="35">
<p>
</form></td></tr></table></td>
</tr>
</table></center>

Instruction:

Modify the table style to suit your site.

Webmaster » Web Programming » JavaScript » Forms » Menu List

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links