Layers for Menu

How to Hide and Show Menu

[Francis]

Is there a way how to show or hide layers easily for use with menu (navigation)?

Say I have a bunch of images on top of my page representing the main menu (navigation). What I want to happen is when I move the mouse over (or click) on a menu item, a sub menu would appear below that. Can this be done using layers? The submenu would also be graphics using javascript to represent mouse overs.

Thanks.

[le_gber]

If you have fireworks 4 or MX it's done automatically. If you haven't download the free Fireworks trial version and 'try' it.

Otherwise looke here: [google.com...]

Hope this helped

Leo

[idiotgirl]

If you don't have or download DreamWeaver there's some easy, basic examples of show-hide layer effect scripts at dhtmlshock's site based on click and mouseover events.

Note: I've noticed many scripts like this (js & layer menu effects) tend to render strangely in Opera, if that's a concern. Even if they say cross-browser friendly, it's always best to test the heck out of them.

[BlobFisk]

This can be done quite easily using layers and some JavaScript.

Basically, you toggle the visibility of layers on and off onmouseover and onmouseout using a script that changes the visibility style setting of your layers.

[Francis]

Hey, thanks for all the advices. Leo, thanks for the link. How do you do that in Fireworks? I'll download the trial.

BlobFisk, I understand what you are saying in principle, but I still have yet to actually do it. Sorry, but I'm still a newbie--- you can say learning everything at the same time.

idiotgirl, how do you do that in dreamweaver? I haven't checked with Opera yet, but I will download Opera. I've heard of such problems but I haven't checked that yet. Thanks for that. If you can also tell me (or provide a link) on how to do that in Dreamweaver.... it will be great.

Thanks a bunch.

Francis

[BlobFisk]

Hey Francis,

Well, it's defenitely something worth looking into. With CSS, JavaScript and some DOM manipulation you do some some pretty powerful things.

A function to switch the visibility of a layer is quite simple to write. For example:

function showLayer(layerName) 
 { 
 document.getElementById(layerName).style.visibility='visible'; 
 }

Similarly, to toggle the visibility off, it would be style.visibility='hidden'. This code is for DOM1 browsers only, a little work is needed to make it compliant in older browsers - but it is possible.

In your html, you would use onmouseover="showLayer('your name')". The script can be extended to put a time delay on hiding the layer.

The beauty about this system of navigation is that you can put whatever you want in the pop-up menu layer. A lot of the free-for-use scripts limit you to text only.

[macrost]

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--
// This script is intended for use with a minimum of Netscape 4 or IE 4.
var ns4 = (document.layers);
var ie4 = (document.all &&!document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 ¦¦ ns6){
document.getElementById(id).style.visibility = "visible";
}
}

function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 ¦¦ ns6){
document.getElementById(id).style.visibility = "hidden";
}
}
//-->
</script>