Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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.


advertisement

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)">


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap