2

Dec 10

Create a Javascript Menu — How to Build a Simple Yet Effective Menu with Javascript

By

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>Home

<div id=Menu1>

<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>Articles

<div id=Menu2>

<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.

This artice is from suite101.com/

Posted in Tutorial Release | 2,025 Comments
Tags: , , ,