Fading Context Menu

Related Articles

One of the things I like about the newer generation browsers (aside from MAC IE) is that they allow for alpha filters where elements can be faded in or out to a developers content. In this tutorial we are going to integrate a fading effect into a right click context menu.

The first thing we are going to do is build a small sniffer so we can separate out Netscape 7+ and Internet Explorer 5.0+

var ie5 = (document.getElementById&&document.all);
var n6 = (document.getElementById&&!document.all);

Now we are going to need to build some variables to utilize later on in the script;

var x,y,el,pageW,pageH;

Each of these variables will be used to capture and hold information employed later in the script.

Now we need to do some event capturing. Netscape 7 uses the W3C compliant event handler document.addEventListner, while IE uses the attachEvent Method. To separate the two out we use a conditional if statement to ensure that each event points to a showMenu() function.

if (n6) document.addEventListener("mouseup",showMenu,false);
if (ie5) document.attachEvent("oncontextmenu",showMenu);
if (ie5) document.attachEvent("onclick",showMenu);

Our next task is to begin to build the showMenu() function that will allow for the display of the context menu.

function showMenu(event) {
if (document.getElementById) {
pageW = document.body.offsetWidth;
pageH = document.body.offsetHeight;
x = event.clientX
y = event.clientY
el = document.getElementById("menu");
if ((ie5&&event.type=="contextmenu")||(n6 && event.which>1)) {
if ((x+parseInt(el.offsetWidth))>=pageW) {
x = parseInt(el.offsetWidth);
y = parseInt(el.offsetHeight);
}
el.style.top=y+"px";
el.style.left=x+"px";
fadeIn();
return false;
}
if ((ie5&&event.type=="click")||(n6 && event.which==1)) {
el.style.visibility="hidden";
fade_index = 0;
}
}
}


The first part is to create a condition that allows only W3C DOM aware browsers to utilize the script.

if (document.getElementById) {

we then point the previously created variables to corresponding commands;

pageW = document.body.offsetWidth;
pageH = document.body.offsetHeight;
x = event.clientX
y = event.clientY
el = document.getElementById("menu");


Next we create some if conditions. The purpose here is to check which event is being triggered and to check the offsetWidth position of the current element. If the conditions hold true then the commands below the conditions will trigger.

if ((ie5&&event.type=="contextmenu")||(n6 && event.which>1)) {
if ((x+parseInt(el.offsetWidth))>=pageW) {


Our variables x and y are put to good use. We first capture the current offset positions of the menu element and then assign those values to the menu elements left and top position respectively. In doing so we ensure that the context menu will follow the mouse around.

x = parseInt(el.offsetWidth);
y = parseInt(el.offsetHeight);
}
el.style.top=y+"px";
el.style.left=x+"px";
fadeIn();


The last line of the above fadeIn() hooks into a function that will trigger the fading in of the menú. Now what we need is a way to toggle the visibility of the menu. To do this we capture the left click of the mouse

if ((ie5&&event.type=="click")||(n6 && event.which==1)) {

we then set the elements visibility to hidden.

el.style.visibility="hidden"

We also need to make sure that the elements opacity is set to 0 (completely faded). We do this by setting a variable fade_index to 0.

fade_index = 0;

We also need to ensure that nothing conflicts with our new menu so we use a return false to ensure that nothing else is displayed when the contextmenu action is triggered.

document.oncontextmenu=new Function("return false") ;

The final part of the script is to build a function that fades the element in. We begin by creating a variable and setting the value to 0;

fade_index = 0;

Then create a function

function fadeIn() {

Set a condition for IE5+ and NS6+ and set the elements visibility to visible;

if(ie5 || n6) {
document.getElementById('menu').style.visibility = 'visible';


Let's assign the filter value of 0 to the menu element. We need to do it differently for each browser so we use a conditional if statement to ensure that the correct method is associated with each browser.

if(ie5) {
document.getElementById('menu').filters.alpha.opacity = fade_index;
}
if(n6) {
document.getElementById('menu').style.MozOpacity = fade_index/100;
}


Now we set the fade_index variable to increase by 3. You can change this value to either speed up the fade in effect or slow it down.

fade_index += 3;

Then create a timer, you can change the value 50 to a greater or lesser value to speed things up or slow things down;

goIn = setTimeout("fadeIn()", 50);

The only thing left to do is to clear the timer when the fade index reaches it maximum fade value (100)

if(fade_index >= 100) clearTimeout(goIn); } }

That's it as far as the scripting section goes. The next section describes methods for styling the context menus.

In the body section of the document, create a layer with the id value of menu and nest in all the links that you will need for the context menu. You can add menu items or remove them just by following the same logic as shown below. Please make sure that for each item you have the appropriate class attached to it;

<div id="menu" class="menu">
<a href="javascript: alert('Item One')" class="menuitem">Item One</a>
<a href="javascript: alert('Item Two')" class="menuitem">Item Two</a>
<a href="javascript: alert('Item Three')" class="menuitem">Item Three</a>
<div class="seperator"></div>
<a href="javascript: alert('Item Four')" class="menuitem">Item Four</a>
<a href="javascript: alert('Item Five')" class="menuitem">Item Five</a>
<a href="javascript: alert('Item Six')" class="menuitem">Item Six</a>
<a href="javascript: alert('Item Seven')" class="menuitem">Item Seven</a>
<div class="seperator"></div>
<a href="javascript: alert('Item Eight')" class="menuitem">Item Eight</a>
</div>


To style the menus simply use a style sheet and edit them to your hearts content. For example,

a {
text-decoration: none;
font-weight: bold;
color: #666666;
}
.menu {
position: absolute;
width: 100px;
top: 0px;
left: 0px;
background-image: url(back1.png);
visibility: hidden;
border: 1px solid;
border-color: #eeeeee #666666 #666666 #eeeeee;
padding: 2px;
z-index: 5;
filter: alpha(opacity=0);
-moz-opacity:1
}
.menuitem {
padding: 2px 4px 2px 4px;
color: #000000;
text-decoration: none;
font-family: ms sans serif;
font-size: 11px;
font-weight: normal;
display: block;
}
.seperator {
border-top: 1px solid #999999;
border-bottom: 1px solid #eeeeee;
margin: 2px;
}
a.menuitem:hover {
color: #ffffff;
background-color: transparent;
background-image: url(back.png);
}


Thats all folks, have fun with this.


Publication Date: Friday 5th September, 2003
Author: Eddie Traversa View profile

Related Articles