AceJS.com > Script number: 118007

The Script

About Me
About My Interets
About My Website

Search Google
Search Yahoo
Search My Site

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
Menu Item 5
Menu Item 6
Menu Item 7

About

Menu

The Source

<HTML>
<HEAD><TITLE>Free Scripts And Tools For Webmasters @ www.AceJS.com</TITLE>
</HEAD>
<BODY>

<!-- STEP 1 - The first thing you have to do is to make a layer which holds a menu
You can do this by copying:

<div id="Your Layer ID" STYLE="visibility:visible;background-color:#004EC3;position:absolute;width:100px;height:0px;left:10;top: 35;overflow:hidden;clip:rect(0,0,0,0);">
Menu Items go here<BR<BR>
<input type=button value="Close" onClick="hidemenu();">
</div>

You will have to change "Your Layer ID" to what ever you want but remember that you will need to use it again in the script, and if you have many menus I would suggest something like "MenuLayer1" and them "MenuLayer2" and so on.
Also change the layer width, left and top to what ever value you need. These will determine the size and position of your menu. Note: the height must be 0 in this step.
-->

<!-- STEP 2 - Next you will need to make the 2 functions
You can do this by copying:

<SCRIPT LANGUAGE="JavaScript">
function showMenuLayer1() {
document.getElementById("MenuLayer1").style.height="1000px";
document.getElementById("MenuLayer1").style.clip="rect(0,100,1000,0)";}

function hideMenuLayer1() {
document.getElementById("MenuLayer1").style.height="0px";
document.getElementById("MenuLayer1").style.clip="rect(0,0,0,0)";}
</SCRIPT>

You will have to change MenuLayer1 to the Layer ID which you created in step 1. Also in the showMenuLayer1 function You will need to set the height of your menu (when it is shown) and the clip variable of your menu to (0,MENU WIDTH,MENU HEIGHT,0). Replace MENU WIDTH and MENU HEIGHT with the actual numbers.
You will not need to change the variables in the hideMenuLayer function.
-->

<!-- STEP 3 - Finally you will need to make the link or picture which will activate the menu.
You can do this by putting an ordenary link or IMG tag but put the bellow line in the tag:

onContextMenu="showMenuLayer1(); return false;"

Remember to change showMenuLayer1 to the function name which will show the menu.
-->

<div id="MenuLayer1" STYLE="visibility:visible;background-color:#004EC3;position:absolute;width:150px;height:0px;left:10;top: 35;overflow:hidden;clip:rect(0,0,0,0);">
<CENTER>About Me<BR>
About My Interets<BR>
About My Website<BR><BR>
<input type=button value="Close" onClick="hideMenuLayer1();"></CENTER>
</div>

<div id="MenuLayer2" STYLE="visibility:visible;background-color:#004EC3;position:absolute;width:150px;height:0px;left:35;top: 75;overflow:hidden;clip:rect(0,0,0,0);">
<CENTER>Search Google<BR>
Search Yahoo<BR>
Search My Site<BR><BR>
<input type=button value="Close" onClick="hideMenuLayer2();"></CENTER>
</div>

<SCRIPT LANGUAGE="JavaScript">
function showMenuLayer1() {
document.getElementById("MenuLayer1").style.height="150px";
document.getElementById("MenuLayer1").style.clip="rect(0,150,150,0)";
document.getElementById("MenuLayer1").style.left = event.clientX;
document.getElementById("MenuLayer1").style.top = event.clientY;
}

function hideMenuLayer1() {
document.getElementById("MenuLayer1").style.height="0px";
document.getElementById("MenuLayer1").style.clip="rect(0,0,0,0)";}

function showMenuLayer2() {
document.getElementById("MenuLayer2").style.height="150px";
document.getElementById("MenuLayer2").style.clip="rect(0,150,150,0)";
document.getElementById("MenuLayer2").style.left = event.clientX;
document.getElementById("MenuLayer2").style.top = event.clientY;
}

function hideMenuLayer2() {
document.getElementById("MenuLayer2").style.height="0px";
document.getElementById("MenuLayer2").style.clip="rect(0,0,0,0)";}

function showMenuLayer3() {
document.getElementById("MenuLayer3").style.height="200px";
document.getElementById("MenuLayer3").style.clip="rect(0,150,200,0)";
document.getElementById("MenuLayer3").style.left = event.clientX;
document.getElementById("MenuLayer3").style.top = event.clientY;}

function hideMenuLayer3() {
document.getElementById("MenuLayer3").style.height="0px";
document.getElementById("MenuLayer3").style.clip="rect(0,0,0,0)";}
</SCRIPT>

<A HREF="#" onContextMenu="showMenuLayer1(); return false;">About</A>
<BR><BR>
<IMG SRC="http://www.AceJS.com/search.gif" onContextMenu="showMenuLayer2(); return false;">
<BR><BR>
<A HREF="#" onContextMenu="showMenuLayer3(); return false;">Menu</A>
<P>
<B><A HREF="http://www.AceJS.com">AceJS.com</A> The JavaScript Directory</B>
</BODY>
</HTML>