Pop Goes the Menu : Page 4

With a few stylesheet rules, some JavaScript mouse-tracking and positioning code, and a DHTML-capable browser, you can create pop-up menus that make your Web applications easier to use.

by Tom Duffy

Mar 5, 2001

Page 4 of 5

Attach the Events
The last thing to do is to attach the events. Here is the modified About menu trigger:

   <div id="About" class="menuTrigger" onMouseOut="this.style.color='';" 
   onMouseOver="showMenu('mnuAbout');
   this.style.color='yellow';">About Us</div>

And here is the associated About menu:

   <div id="mnuAbout" class="menu" onMouseOut="hideMenu(mnuSelected)" 
   onMouseOver="showMenu(mnuSelected)">

I included both mouse over and mouse out events for each menu as NS6 fires a mouse out event during the transition from the trigger to the menu.

The final touch is to modify the menu items so that they highlight when the mouse passes over them. One possible solution is to modify each item in the menu so that it looks like this:

   <p onMouseOver="this.style.backgroundColor='red'" 
   onMouseOut="this.style.backgroundColor=''">
   <a href="#">About 1</a></p>

Once again I wrapped the text in an <a> element but I assume that each menu item will have some function to perform. You can replace the # with an appropriate call.

To make the system work, modify the <body> element so that it calls init(). Ive also included an onResize event so that the window will reposition the menus and resize the menu bar whenever the user resizes the window:

   <body onLoad="init()" onResize="history.go(0)">

Download The Code for this Article

« Previous Page 1 2 345 Next Page »

0 Comments (click to add your comment)

Comment and Contribute