Sections Sliding Open & Shut

[anthonyaykut]

Hi All,

First post so please go easy on me.

I have seen a couple of web sites now where a section slides
open or shut slowly after you do a mouseover on a link, to reveal content - this produces a really cool effect. Any ideas on how to reproduce something like this?

Regards
Anthony

[tommysphone]

Well, you could build a layered page, and each link in the menu calls a layer. The layer will simply appear on the page. To get it to slide in there will be some more code required.
Non fancy page:

<script Language="JavaScript">
function CheckBoxes(ClickedBox) {
var ptrForm = document.form;
switch(ClickedBox) {
case ('layer1'):
document.all.layer1Layer.style.display = 'block';
document.all.layer2Layer.style.display = 'none';
document.all.layer3Layer.style.display = 'none';

break;

case ('layer2'):
document.all.layer2Layer.style.display = 'block';
document.all.layer3Layer.style.display = 'none';
document.all.layer1Layer.style.display = 'none';

break;

case ('layer3'):
document.all.layer3Layer.style.display = 'block';
document.all.layer1Layer.style.display = 'none';
document.all.layer2Layer.style.display = 'none';
break;
}
}
</script>

Give each layer an ID. id="layer1Layer" id="layer2Layer" id="layer3Layer"
and off you go

[Skyzyx]

Tommysphone's method is very good, but do not use document.all, as this will only work in IE. Use document.getElementById() instead, as this will work in IE 5.0+, Netscape 6.0+ (and every other Gecko Browser), and Opera 6.0+.

Instead of using:

case ('layer1'):
document.all.layer1Layer.style.display = 'block';
document.all.layer2Layer.style.display = 'none';
document.all.layer3Layer.style.display = 'none';


This is a better method:

case ('layer1'):
document.getElementById('layer1Layer').style.display = 'block';
document.getElementById('layer2Layer').style.display = 'none';
document.getElementById('layer3Layer').style.display = 'none';


As I said, this will work in many more browsers that the other method.

[Mr J]

Take a look here for examples of sliding layers


www.huntingground.freeserve.co.uk/style/lyr_left.htm