Email

See More About:

menu

Hover Menu

2. Get the Script

Join the Discussion

Questions? Comments?

More of this Feature

Introduction Get the Stylesheet Customize the Menu

To add the hover to your web page you need to copy both Javascript and stylesheet code into the head section of your page. We'll get the Javascript first.

// Hover Menu Script
// copyright Stephen Chapman, 19th May 2005
// you may copy this script provided that you retain the copyright notice

var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById;
if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else {
var nsDOM = ((navigator.appName.indexOf('Netscape') != -1)
&& (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) {
if (stdDOM) return wS ? document.getElementById(objectId).style:
document.getElementById(objectId);
if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId];
if (nsDOM) return document.layers[objectId];
}
function objWidth(objectID) {var obj = xDOM(objectID,0); if(obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0;}
function objHeight(objectID) {var obj = xDOM(objectID,0); if(obj.offsetHeight) return obj.offsetHeight; if (obj.clip) return obj.clip.height; return 0;}
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}
function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}
function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
var xxx = 0; var yyy = 0;
function start() {var w = objWidth('hovmenu');var h = objHeight('hovmenu');xxx = Math.floor(pageWidth()-w-20);yyy = Math.floor(pageHeight()-h - 20);moveit();setObjVis('hovmenu','visible');}
function moveit() {var x = (posLeft()+xxx) + 'px';var y = (posTop()+yyy) + 'px';moveObjTo('hovmenu',x,y);}
window.onload = start;
window.onscroll = start;
window.onresize = start;
function toggleDisplay(objectID) {var objs = xDOM(objectID,1); var vis = objs.display; objs.display = (vis == "block") ? 'none' : 'block';start(); return false;}
var ag = navigator.userAgent.toLowerCase();var isG = (ag.indexOf('gecko') != -1);var isR=0;if (isG) {t = ag.split('rv:'); isR = parseFloat(t[1]);}if ( isR) setInterval('moveit()',50);

Once you have copied your code you just save it to an external javascript file. I called mine hovmenu.js.

The next step is to obtain the stylesheet code and then to link both into your page.

Stephen Chapman

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

©2010 About.com, a part of The New York Times Company.

All rights reserved.