celebrity writers

Create a Javascript Menu

How to Build a Simple Yet Effective Menu with Javascript

Aug 31, 2008

Use Javascript to create a menu, Mark Alexander Bain

This tutorial shows just how easy it is to develop a menu for a web page - all though the power of Javascript.

Javascript provides the web page developer with an excellent and powerful programming tool - which is, of course, why it forms the core of that current hot Internet technique: Ajax (Asynchronous Javascript and XML). However, Javascript can be of benefit to any web site - especially when it comes to manipulating objects on a web page: objects such a menus.

The Basics of a Javascript Menu

In order to create a menu the web site developer needs to make use of two Javascript methods:

· onmouseover - this is triggered when the mouse pointer is placed over an object
· onmouseout - triggered when the mouse pointer is moved away from an object

The web site developer also needs to make use of the web page's object's style, and in particular the object's:

background-color
display
left
position
top
width
z-index

By combining these Javascript methods and by using Javascript code to manipulate each object's style the developer can hide and reveal objects at will i.e. create a menu.

Using Javascript to Hide and to Show Objects on a Web Page

The concept of the menu is quite simple:

the web page user moves their mouse pointer to a set area of the screen
an otherwise hidden area of text is displayed giving the user access to additional commands
the area of text is hidden again once the user moves the mouse pointer to another area of the screen

and this can be demonstrated by some simple Javascript and some HTML:

<script type="text/javascript">

function hide(menu){

var menuStyle=document.getElementById(menu).style;

menuStyle.display="none";

}

function show(menu) {

var menuStyle=document.getElementById(menu).style;

menuStyle.display="block";

}

</script>

This Javascript code defines two functions:

hide - sets an object's style display property to "none" thereby making it invisible
show - sets an object's style display property to "block" thereby making it visible

The web page then needs two more things:

some HTML code to trigger the functions
some HTML code which is to be revealed and then hidden again

Something like:

<div onmouseover="javascript:show('Menu1')"

onmouseout="javascript:hide('Menu1')">

<b>Show Menu</b>

<div style="display: none;" id="Menu1">

<a href="http://www.suite101.com/">Suite101.com</a><br>

<a href="http://www.suite101.com/profile.cfm/linuxtalk">About</a>

</div>

In this example the text "Show Menu" will be displayed, and as soon as the user placed their mouse pointer over this text then the menu will be displayed.

Finally the page needs some more Javascript - this time to hide the "menu" when the page is loaded:

<script type="text/javascript">

hide('Menu1');

</script>

A Complete Javascript Menu

The only differences between the simple example shown above and a complete menu are:

additional style information for the positioning and the format of the menus
additional HTML to create all of the elements required for the menu

The additional style information does the following jobs:

uses the position, top and left style properties to fix the menu to the correct position in the web page
uses the z-order property to ensure that the menu overlays any other text and the background property to hide any underlying text

And so the source for a web page containing a menu is:

<html>

<head>

<style>

.menu1,.submenu1 {background-color:silver;

position:absolute;

left:0;

top:0;

width:50;

z-index:1;}

.submenu1 {

z-index:0;

top:20;

width:100;

}

.menu2,.submenu2 {background-color:lightgreen;

position:absolute;

top:0;

left:50;

width:50;

z-index:1;

}

.submenu2 {

z-index:0;

left:0;

top:20;

width:300;

}

</style>

<script type="text/javascript">

function hide(menu){

var menuStyle=document.getElementById(menu).style;

menuStyle.display="none";

}

function show(menu) {

var menuStyle=document.getElementById(menu).style;

menuStyle.display="block";

}

</script>

</head>

<body>

<div>

<table cellspacing=0 cellpadding=2>

<tr>

<td onmouseover="javascript:show('Menu1')" onmouseout="javascript:hide('Menu1')"

valign=top class=menu1>Home

<div id=Menu1 class=submenu1>

<a href=http://www.suite101.com>Suite101.com</a><br>

<a href=http://www.suite101.com/profile.cfm/linuxtalk>About</a>

</div>

</td>

<td onmouseover="javascript:show('Menu2')" onmouseout="javascript:hide('Menu2')"

valign=top class=menu2>Articles

<div id=Menu2 class=submenu2>

<a href=http://database-programming.suite101.com/article.cfm/mysql_stored_procedures_and_functions>

MySQL Stored Procedures and Functions</a><br>

<a href=http://computer-programming-languages.suite101.com/article.cfm/gambas_almost_visual_basic_on_linux>

Gambas: Almost Visual Basic on Linux</a>

</div>

</td>

</tr>

</table>

</div>

<div style="position:absolute;top:30">

How to create a simple, yet effective, menu for a web page.

</div>

<script type="text/javascript">

hide('Menu1');

hide('Menu2');

</script>

</body>

</html>

Conclusion

A Javacript menu is a very simple yet effective technique - with it a web site developer can produce professional looking menus with the minimum of time and effort

The copyright of the article Create a Javascript Menu in Javascript/Java Programming is owned by Mark Alexander Bain. Permission to republish Create a Javascript Menu in print or online must be granted by the author in writing.