JavaScript Jumpstart #3 - dHTML menus - JavaScript and AJAX forum at WebmasterWorld

With this issue we welcome a guest writer, BlobFisk [webmasterworld.com], who shares with us his industrial strength script for creating the popular dHTML "cascading menu". If you've ever wanted to tear apart the pile of code involved and see what makes it tick - here's the article you need to guide you.

The approach here supports older browsers, including NN 4.7. That alone makes this script a gem.

So enough from me -- here's BlobFisk:

JavaScript Menu System
using Layers

One of the more popular combinations of JavaScript and CSS-P (positioning using CSS) comes in the form of the javascript popup menu. More commonly known as dHTML, this is basically manipulation of the DOM (Document Object Model) using JavaScript.

The following JavaScript file does this; it allows us to toggle the visibility of layers on and off, thus allowing us to build a drop down menu system. There are added functions that allow us to set a timeout value for hover states, which means that once a user moves the mouse away from our drop down menu, after a certain time interval it disappears.

If only DOM1 compliant browsers need to be supported, the code would be half the size – but in the variable environment that is the Internet, the script accommodates many flavours of browser. I've tested this and it works in NN4.7x and above, IE4.0 and above, Mozilla 0.9 and above and Opera 5 and above.

OK, so lets dive in! I’ve broken this down into many functional units for ease of explanation. The first section to tackle is the external JS file.


function reDo() { 
 window.location.reload(); 
 } window.onresize = reDo; 
//Define global variables 
var timerID = null; 
var timerOn = false; 
var timecount = 1000; 
// Change this to the time delay that you desire 
var what = null; 
var newbrowser = true; 
var check = false;

Here we are defining some global variables that we will use in the script. The most important one is the timecount variable – this is the delay (in milliseconds) that will be used to hide layers after the user has moused away from them.

The reDo() function is to accommodate browsers that will not dynamically regenerate the DOM when the browser window has been resized – so we force it to do so.


function init() { 
 if (document.layers) { 
 layerRef="document.layers"; 
 styleSwitch=""; 
 visibleVar="show"; 
 screenSize = window.innerWidth; 
 what ="ns4"; 
 } 
 else if(document.all) { 
 layerRef="document.all"; 
 styleSwitch=".style"; 
 visibleVar="visible"; 
 screenSize = document.body.clientWidth + 18; 
 what ="ie4"; 
 } 
 else if(document.getElementById) { 
 layerRef="document.getElementByID"; 
 styleSwitch=".style"; 
 visibleVar="visible"; 
 what="dom1"; 
 } 
 else { 
 what="none"; 
 newbrowser = false; 
 } 
check = true; 
}

The function init() determines for us what browser version that we are dealing with and assigns a values to the variables what, layerRef, styleSwitch and visibleVar, which we will use in our layer visibility toggling functions. We also assign the Boolean value ‘true’ to the check variable.

Armed with this information we can now get stuck in to the meat of the script.


// Toggles the layer visibility on 
function showLayer(layerName) { 
 if(check) { 
 if (what =="none") { 
 return; 
 } 
 else if (what == "dom1") { 
 document.getElementById(layerName).style.visibility="visible"; 
 } 
 else { 
 eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); 
 } 
 } 
 else { 
 return; 
 } 
 }

First, we make sure that the init() function has done it’s job with if(check) – this looks to see if the variable check is true, and then works it’s way through the function. Our first port of call is for DOM1 compliant browsers, where we set the visibility of the layer to visible. For all other browsers we make use of the information gleaned in the init() function. We evaluate the layerRef variable value (document.all for old IE browsers or document.layers for Netscape 4.x), with the layer name, add in the styleSwitch value (.style for old IE and nothing for NN4.x). This eval command allows us to dynamically build the correct command for the appropriate browser.


// Toggles the layer visibility off 
function hideLayer(layerName) { 
 if(check) { 
 if (what =="none") { 
 return; 
 } 
 else if (what == "dom1") { 
 document.getElementById(layerName).style.visibility="hidden"; 
 } 
 else { 
 eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); 
 } 
 } 
 else { 
 return; 
 } 
 }

The hideLayer function is almost identical to the showLayer function in it’s working, except that it changes the visibility property to hidden.


function hideAll() { 
 hideLayer('layer1'); 
 hideLayer('layer2'); 
 hideLayer('layer3'); 
 //Put all layers used in the nav here. 
 //Copy the hideLayer() function above. 
 }

This function allows us to hide every layer used in out menu system in one fell swoop! This means that we can make sure that all layers are turned off, before making the appropriate layer visible. All you need to do is call the hideLayer function for each layer used in your menu system.


function startTime() { 
 if (timerOn == false) { 
 timerID=setTimeout( "hideAll()" , timecount); 
 timerOn = true; 
 } 
 }

This function starts the timer to hide every layer. We use this function to turn all layers off, if the user has moused away from them for more than out timecount value (set at 1000miliseconds in the global variable section)


function stopTime() { 
 if (timerOn) { 
 clearTimeout(timerID); 
 timerID = null; 
 timerOn = false; 
 } 
 }

Similarly, the stopTime function stops the timer altogether.


function onLoad() { 
 init(); 
 }

This final function runs the init function when the page loads. We also use an onLoad event in the body tag to double check this.

Ok, now on to the HTML pages. First call the menu.js file in the head of your document:

<script type="text/javascript" src="nav.js"></script>

Then, in the body tag, run the init() function:

onLoad="init();"

Then, for the object that is the trigger for the menu use the following code in the <a> tag:

onMouseOver="hideAll(); showLayer('layerName'); stopTime()" onMouseOut="startTime();"

hideAll() hides all layers specified in the hideAll() function in the .js file. (NB: Don’t forget to edit this and insert all layers that should be controlled by this function).

stopTime() stops the timer to hide all layers. This is when the user rolls out of the layer, after a time delay all layers hide.

showLayer('<layerName>') triggers the showing of the layer.

startTime() restarts the timer.

You need to create the layers which are acting as the drop down menu. The ID must be the same as that called in the hideAll() function and the showLayer() and hideLayer() functions.

Put whatever you need in these layers, and then position them so that they are underneath (for vertical menu popups) or beside (for horizontal menu popups) the trigger object.

[edited by: tedster at 4:02 am (utc) on June 12, 2003]

#nestDiv {
top: 10px;
left:20px;
position: absolute;
width: 50px;
height: 50px;
border: 1px solid #000;
background: #fcc;
color: #000;
}
</style>

JavaScript Jumpstart #3 - dHTML menus

show-hide layers menu system

tedster

korkus2000

BlobFisk

tedster

BlobFisk

jfred1979

Reflection

jfred1979

BlobFisk

jfred1979

BlobFisk

jfred1979

BlobFisk

Reflection

jfred1979

Reflection

BlobFisk

jfred1979

BlobFisk

Reflection

BlobFisk

captainbri

BlobFisk

carramba

BlobFisk

carramba

BlobFisk

carramba

BlobFisk

carramba

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week