Many
things can be done with layers, one of the most useful thing being the
navigational drop down menus. Only problem with many HTML editors
including Dreamweaver at the moment is that they do not provide an
option to close or hide the layers after a specified time. So most of
the time you need to hide it yourself by placing behaviors on other
links or images, that way when you mouse over on certain images or
links it will automatically hide the layers. However there is one
shortcoming with this method, if the user does not mouse over on these
particular images or links with behaviors your layer will stay
visible.
This tutorial will teach you how to hide layers by themselves after let's say 5 seconds.
Before we proceed with the tutorial please have a look at the final outcome of the tutorial here.
1. Create a new page and call it hide_div.html. Create a link and a layer in the same page, rename your layer to Menu1. Now add a behavior to your link, so that when you mouse over it will show the layer Menu1.
By the way put # for the link url, otherwise you won't be able to add
behaviors to the link unless of course it is actually linked to other
page or url, but here we do not want to link it to other page we just
want to show our Layer when it
is mouse overed therefore putting # in the link url would solve this
problem of linking to other page. Your link code should look like this:
2. Now put this code in the Head section of your page, anywhere between <head> </head> tags.
<SCRIPT language="JavaScript">
<!--
function HideMenus()
{
setTimeout("HideOpenMenus()",5000);
}
function HideOpenMenus()
{
Menu1.style.visibility = 'hidden';
}
//-->
</SCRIPT>
|
Now go to the link that you added behavior previously. View it in Code View. You should see a code something similar to this:
|
<a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')">Link 1 </a> |
3. In your link code after ,'show')" and before > closing tag add onMouseOut="HideMenus();"
After adding the tag your code should look like below:
|
<a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="HideMenus();">Link 1 </a>
|
Now
hit the preview button in your Dreamweaver or HTML Editor and check how
your page looks and if your link is functioning properly. After you
mouse over on your link the layer should close after 5 seconds.
Let's go through the code and understand what it does.
4. Adding onMouseOut function to your link calls the HideMenu() function in the head section:
|
<a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="HideMenus();">Link 1 </a>
|
Similarly HideMenu() function waits 5 seconds and calls HideOpenMenus() function:
<SCRIPT language="JavaScript">
<!--
function HideMenus()
{
setTimeout("HideOpenMenus()",5000);
}
function HideOpenMenus()
{
Menu1.style.visibility = 'hidden';
}
//-->
</SCRIPT>
|
And HideOpenMenus() function closes the Menu1 layer that you have created:
<SCRIPT language="JavaScript">
<!--
function HideMenus()
{
setTimeout("HideOpenMenus()",5000);
}
function HideOpenMenus()
{
Menu1.style.visibility = 'hidden';
}
//-->
</SCRIPT>
|
That's basically all.
5.
If you want to hide the layer after 10 seconds specify the time as
10000, you can also close multiple layers at once by adding another
line to the code like this:
Menu1.style.visibility = 'hidden';
Menu2.style.visibility = 'hidden';
Menu3.style.visibility = 'hidden';
Products.style.visibility = 'hidden';
AnyOtherName.style.visibility = 'hidden';
|
I hope it was useful!