advertisement
| PULLDOWN MENUS |
Many sites use pull down menus for navigation like this one Where Do You Want to Go ? |
These are surprisingly easy to create with the use of a FORM and some JAVASCRIPT (see advanced sections in tutorials) Here is another example which you can do Where do you want to go The completed code which will create a HTML page with that pullbar menu link is at the bottom of the page for you to copy and paste
(for ease composer and frontpage
express users should use add HTML functions for this just copy
the whole lot in)
The code is explained below with details in purple:- (red indicates replaceable areas that you can adapt)
<body>
<script> Beginning of the javascript
<!--//
// PULLDOWN MENU
//From Basic Web Resource Site
// at http://www.fluffbucket.com.(c) A.Duncan
// You can use and modify this script
// Provided you do not remove this and the 4 lines above.
function select_site(){
A Javascipt function called "select_site" is defined
choice=
document.siteform.pulldown.selectedIndex;
Choice is an attribute defined by your selection from the form (called siteform) and its options (selected ones called pulldown)
top.location.href=
document.siteform.pulldown.options[choice].value;
Tells the browser to open the new page (defined by choice)over the existing window (by top)
}
end of select_site function
//-->
</script>
end of javascript
Where do you want to go
<form name="siteform">
Gives form name (siteform)
<select name="pulldown"
onchange="select_site();">
Tells form to process selected name (pulldown) by javascript select_site
<option selected>choose your site-</option>
Sets the initial display of menu which has no function
<option value="http://www.fluffbucket.com">Basic Web Resource Site</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.w3.org">World wide web Consortium</option>
<option value="http://java.sun.com">java.sun.com</option>
These lines sets the target for each option (by value) and the name displayed (you can have as many of these as you want). The links also need not be absolute (e.g.home.htm is acceptable)
</select>
</form>
</body>
Our example at the top is simply paced in a table with a border and a grey background Completed code of HTML page with pulldown link menu Please keep the copyright notice in the script. Also bear in mind our legal notices
<script>
<!--//
//PULLDOWN MENU
// From Basic Web Resource Site
// at http://www.fluffbucket.com.(c) A.Duncan
// You can use and modify this script
// Provided you do not remove this and the 4 lines above.
function select_site(){
choice=
document.siteform.pulldown.selectedIndex;
top.location.href=
document.siteform.pulldown.options[choice].value;
}
//-->
</script>
Where do you want to go
<form name="siteform">
<select name="pulldown"
onchange="select_site();">
<option selected>choose your site-</option>
<option value="http://www.fluffbucket.com">Basic Web Resources Site</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.w3.org">World wide web Consortium</option>
<option value="http://java.sun.com">java.sun.com</option>
</select>
</form>
(for ease composer and frontpage
express users should use add HTML functions for this just copy
the whole lot in)
| 
