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

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


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

WEBINAR:

On-Demand

Application Security Testing: An Integral Part of DevOps


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
×
We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date