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 addbehaviors to the link unless of course it is actually linked to otherpage or url, but here we do not want to link it to other page we justwant to show our Layer when itis mouse overed therefore putting # in the link url would solve thisproblem of linking to other page. Your link code should look like this:
| <a href="#">Link1</a> |
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> |
Nowhit the preview button in your Dreamweaver or HTML Editor and check howyour page looks and if your link is functioning properly. After youmouse 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 as10000, you can also close multiple layers at once by adding anotherline 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!
Related Articles
- How to Grab the Attention of your Audience With your Web SiteUsing the first ten seconds of view time to offer and deliver your promise is the key to converting a hesitant website visitor into a customer.
- Page Loading TimeLearn how to output the time a page takes to load.
- Redirect UrlOccasionally, you may wish to have a redirect page that pauses for a few seconds before sending the visitor off to the destination. For example, there may be important text on the redirect page you wish the visitor to get a chance to read, or a banner ad to see.before proceeding. This redirect script
- Javascript ClockThis will create a nice JS clock. You can change the color of it too.
- Binary ClockHours, minutes and seconds java script clock, with the twist that the time is displayed in binary! An unusual script, that gives a nice twist to the standard java script clock. The only down side is that you need to understand binary to read the time.
- Last Modified, Loading Time, Preload your ImagesLast Modified, Preload your Images, Loading Time. In this tutorial you will find scripts for this topics.
- The Use of Color in Movie Posters and Film MarketingThe Use of Color in Movie Posters and Film Marketing.If youll take some time just to look at your collection of movies and study the cover art work, youll start to notice several trends going on that you should be aware of as a designer. Youll begin to discover
- Create An Automatic Redirection PageMany novice webmasters launch their websites without having their own domain name or a commercial web host. Instead, they rely on free hosts, using a sub-domain (such as: yoursite.freehost.com or www.freehost.com/yoursite) as their websites URL.
However, as the number of visitors grows and thei.... - Some PHP Functions You Must KnowPHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.
- Make your Web Page Loading FastThis article will tell you everything you need to know to get your webpage loading at maximal speed. The author gives you nine ways to increase your speed, and he tells you how to make the necessary changes to get very fast load times.