Tutorial on How to Pull Down Menus in Java Script
JavaScript allows you to create dynamic drop (pull)-down menus. JavaScript code is normally enclosed directly in the HTML document, which removes the need for two files, one for the html document and one for the script. The JavaScript code can be found anywhere in the document, but is often placed in the head section. The code is then called in the body of the document.
-
JavaScript Code
-
The script included in this article will create a drop down menu that will take the user to a new web page as soon as the option is selected.
The first function will create an array.
function createArray()
{ var arg = createArray.arguments;
for ( var i=0; i<arg.length; i++ )
{ this[i] = arg[i]; }
this.length = arg.length;
}Then you will fill the array with the web address (URLs) for your menu items. If you have more than one menu in your web page, you can create more than one array.
var urls = new createArray(
"http://yahoo.com",
"http://google.com",
"http://msn.com",
"http://facebook.com",
"http://myspace.com");The final JavaScript function will open the menu option in the same window as the current page.
function openURL(which)
{m = which.selectedIndex;
url = urls[m];
location.href = url; }The menu items will each have an index number. This number is referenced in the "m=which.selectedIndex" statement. The index number is used in the "url=urls[m]" statement which gets the correct URL from the array. The "location.href=url" statement tells the browser to go to the new web site.
HTML Document
-
The JavaScript code is placed within the script elements in the head section of the HTML document. You should also enclose the code within a comment so that it will not be read by browsers that do not support scripting.
<Head>
<SCRIPT LANGUAGE="JavaScript"><!--
JavaScript Code
//-->
</SCRIPT>
</Head>The actual form is created within the body section of the document. It is created with the select element and the names of the web sites are held within the option elements. You do not add the web addresses as values for the option element as they are held in the array created above.
<Body>
<form name="Form">
<select name="menu" onChange = "openURL()">
<option>Yahoo </option>
<option>Google</option>
<option>MSN</option>
<option>Facebook</option>
<option>MySpace</option>
</select>
</form>
</Body>You can add more functionality by adding mouseover events to create sliding menus. You can also add more menus by adding a number to the array variable and then passing that number to the "openURL()" function.
-
Related Searches
References
Resources
Comments
-
concentrate on these types of websites you can enjoy by learning these concepts.
-
It is a good website for beginners who can learn a lot in a clear understanding manner.
