JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript

Hover Menu

4. Customize the Menu

clr gif
Join the Discussion

Questions? Comments?

The 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

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.