Hover Menu4. Customize the Menu |
|
Join the DiscussionMore of this FeatureThe final step is to add the HTML for our hover menu into the body of our web page. Since it will be automatically moved to the bottom right corner of the screen and will not display until the page finishs loading it doesn't really matter where in the body of your page that you define it. Either immediately after the body tag or at the very bottom of the body is probably a good spot so that it is not in the middle of some other content within your page that may break the functionality. Here is the code that I used for the hover menu on this page. The part shown in bold must be coded exactly as shown while you can replace the rest with whatever code that is required for your navigation links.
<div id="hovmenu"><div
id="menu">
<a href="blhover1.htm">1. Introduction</a><br> <a href="blhover2.htm">2. Get the Script</a><br> <a href="blhover3.htm">3. Get the Stylesheet</a> </div><a href="#" onclick="toggleDisplay('menu');">menu</a></div> |
Explore JavaScript
Must Reads
About.com Special Features
The Best Web Trends of the Decade
A look back at the best innovations, ideas and technologies over the last 10 years, More >
Family Tech Center
Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >
©2009 About.com, a part of The New York Times Company.
All rights reserved.