Sponsor: onwire.co.uk


TechCorner

Web Tips

Unix Tips

Links

 

How did you do that menu ...

It is very simple  has no external script, the code is a couple of lines of javascript and it has support in Internet Explorer 5.0+ and Netscape 6.0+

How's it work it uses the "document.getElementById" function in javascript.

Start by looking at this code:

See it in action here

___________________

<html>

<head>
<title> menu</title>
<style>
  .menu {color: blue; background-color: white;width:200 ; border: 2px solid black; visibility: hidden}
</style>
</head>

<body>
<a href="JavaScript:;" 
onMouseover="document.getElementById('menua').style.visibility='visible';
 document.getElementById('menub').style.visibility='hidden' " ; >Menu A</a>
<p>
<a href="JavaScript:;" 
onMouseover="document.getElementById('menua').style.visibility='hidden'; 
document.getElementById('menub').style.visibility='visible' ; " ;>
Menu B</a>

<div id="menua" class="menu">
 <a href="anotherpage.htm"> menu A item 1</a>
<br><a href="anotherpage.htm"> menu A item 2</a>
</div>

<div id="menub" class="menu">
 <a href="anotherpage.htm"> menu B item 1</a>
<br><a href="anotherpage.htm"> menu B item 2</a>
</div>
</body>
</html>

__________________

The command onMouseover  display one menu and hides the other menu defined in the <div> code.  

See it in action here

The next code is more complete and uses two additional elements -

The positioning is controlled by the style definitions using absolute references:

<STYLE type="text/css">
<!-- 
.menu { background-color: yellow; width: 100; visibility: hidden; position: absolute; top:130; left: 80; z-index: 15; border: 2px solid yellow; }
-->

We force the closure of all the menus when you move into the main table area
onMouseover="ShowMenu('blank')

See it in action here

___________________

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">
function ShowMenu(VIEW)
{
document.getElementById('menua').style.visibility='hidden';
document.getElementById('menub').style.visibility='hidden';
document.getElementById(VIEW).style.visibility='visible';
}
</SCRIPT>
<STYLE type="text/css">
<!-- 
.menu { background-color: yellow; width: 100; visibility: hidden; position: absolute; left: 80; z-index: 15; border: 2px solid yellow;
 font-family: arial; font-size: 14; font-style: bold; color: black }
-->
</STYLE>
<title> menu</title>
</head>
<body>
<table>
<tr>
<td width=100 >
<a href="JavaScript:;"
onMouseover=" ShowMenu('menua');" style="position: absolute; top: 20; left: 20" ;>Menu A</a>
<p>
<a href="JavaScript:;"
onMouseover="ShowMenu('menub');" style="position: absolute; top: 40; left: 20" ;>Menu B</a>

</td>
<td width=500 onMouseover="ShowMenu('blank');">
</td>
</table>

<div id="menua" class="menu" style=top:20>
<a href="anotherpage.htm">menu A item 1</a>
<br><a href="anotherpage.htm">menu A item 2</a>
</div>


<div id="menub" class="menu" style=top:40>
<a href="anotherpage.htm">menu B item 1</a>
<br><a href="anotherpage.htm">menu B item 2</a>
</div>

<div id="blank">
</div>

</body>
</html>

___________________

See it in action here

And thats it you can format the menus as you wish with text or images or both.

Home --> Web --> Menu

Cascading Menu