Creating a Simple Menu
| Level: |
Advanced
|
| Techniques: |
HTML, JavaScript (no DHTML) |
| Compatibility: |
Internet Explorer >4.0, Netscape 7, Opera
6,7 |
| Keywords: |
Layers, Menu, HTML, JavaScript |
Preamble
In this article you will learn how to implement a drop-down menu using
JavaScript. Drop-down menus are frequently used to ease navigation on
the site. When you have a lot of menu points that can be grouped by some
subject, they can be organized in tree-like structures, requiring less
space, more compact, making more sense to the user.
This article uses mm.js library based
on scripts built in Macromedia
Dreamweaver 6.1/MX.
Files used in this article:
Step 1. Creating a Page
Let’s start with creating an HTML page.
Put there a link:
It will be used as a 'menu root'. We can use image or some other element instead
of text inside the <a>..</a> tag. <a> must
be present to to allow the element to react to mouse events.
Step 2. Creating Menu HTML
Add a menu to the page. As a sample we will create a table of 2 rows
and 1 and surrounded by <div> tag:
Attach divMenu position to the desired place by
changing the 'left' and 'top' values.
Then set its visibility to "hidden":
<div id="divMenu" style="position:absolute;
left: 25px; top: 26px; visibility: hidden;">
<div> tag is used as a placeholder
for text, images and other elements that are used in menu since it allows
us to control its position and visibility via CSS style property.
Also it is easily accessible from script by its id.
Step 3. JavaScript explained
In this step we will write some JavaScript functions that will help
the menu to interact with user. place the following lines inside of the <head>..</head> tag:
Let's see what these functions do.
document.menuTimer = 0;
This
line sets the internal variable used in menu to store the handle to the Timer object.
function menuHide(){
MM_showHideLayers('divMenu','','hide');
}
This function simply hides the menu layer.
function menuOut(){
document.menuTimer = setTimeout('menuHide()', 500)
}
This function should be called on mouse passing out of the menu point to hide
the menu.
But if we will hide the menu immediately on mouse exit, user will not have a
time
to
move
mouse from one menu point to another.
The solution is that menuOut() utilizes built-in
JavaScript setTimeout() function to delay the execution
of menuHide() by 500 milliseconds (0,5 seconds).
It gives the user enough time to select the menu point, but still doesn't leave
the menu on the screen too long when user leaves the menu. The handle to the
timer created
by setTimeout() is stored in document.menuTimer variable.
function menuShow(){
clearTimeout(document.menuTimer);
MM_showHideLayers('divMenu','','show');
}
This function will show the menu on the screen.
First of all, we need to call built-in clearTimeout() function
to cancel the timer started by menuOut() (if any).
Next line of code sets the divMenu visibility to
show to display the menu if it was in hidden state.
Step 4. Final Cut
Now let's attach these functions to the main menu...
<a href="menu.html" onMouseOut="menuOut();" onMouseOver="menuShow();">
Main menu
</a>
...and to each of the menu points if you want them to act separately...
<table border="0" cellspacing="2" cellpadding="4">
<tr>
<td bgcolor="#FFCC99" onMouseOut="menuOut();" onMouseOver="menuShow();">
Menu point 1
</td>
</tr>
<tr>
<td bgcolor="#FFCC99" onMouseOut="menuOut();" onMouseOver="menuShow();">
Menu point 2
</td>
</tr>
</table>
or to the whole divMenu to handle the menu as
a single block.
That's it!
Mikhail [Snus] Vinetskiy
Dewia
|
