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 5

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

Add Sub-Menus
Adding sub-menus to the system is almost as intuitive as implementing the main menus. To illustrate, Ill add a sub-menu to the first mnuAbout menu item. Start by declaring the menu inside a <div> element:

   <div id="mnuAboutSub1" class="menu" style="top: 30">
   <p onMouseOver="this.style.backgroundColor='red'" 
   onMouseOut="this.style.backgroundColor=''">
   <a href="#">Sub About 1</a></p>
   <p onMouseOver="this.style.backgroundColor='red'" 
   onMouseOut="this.style.backgroundColor=''">
   <a href="#">Sub About 1</a></p>
   <p onMouseOver="this.style.backgroundColor='red'" 
   onMouseOut="this.style.backgroundColor=''">
   <a href="#">Sub About 1</a></p>
   <p onMouseOver="this.style.backgroundColor='red'" 
   onMouseOut="this.style.backgroundColor=''">
   <a href="#">Sub About 1</a></p>
   </div>

Set the top of the sub-menu to 30 pixels. Since the item that triggers the sub-menu is a <p> element, not a <div>, and it has no positioning style rules, I arrived at the number through trial and error. The number 30 seemed to work best for both IE5 and NS6. From a readability standpoint, this seemed a simpler approach than setting each menu item in a <div> and positioning it dynamically. Its imperfect but it works.

Now, add two functions and a variable to keep track of the currently visible sub-menu:

   var subMnuSelected = '';
   function showSubMenu(menu){
   hideSubMenu(subMnuSelected);
   document.getElementById(menu).style.visibility = 'visible';
   subMnuSelected = menu;
   }
   function hideSubMenu(menu){
   if(subMnuSelected!='')
      document.getElementById(menu).style.visibility = 'hidden';
   }

These functions are nearly identical to those for the main menu system but they have a separate index because the menu that triggers the sub-menu should stay visible while the sub-menu is visible. Using the functions for the main system would hide the trigger menu while showing the sub-menu.

To set the sub-menus left property, add this code to the end of the init() function:



   document.getElementById('mnuAboutSub1').style.left = 
   parseInt(document.getElementById('About').style.left) + 100;

Now its time to attach the events. Youll have to modify the main menu triggers like this:

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

Next, modify the mnuAbout <div> so that it hides any sub-menu in the onMouseOut event:

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

Finally, modify the About 1 <p> element to show the sub-menu:

   <p onMouseOver="this.style.backgroundColor='red'; 
   showSubMenu('mnuAboutSub1');" 
   onMouseOut="this.style.backgroundColor=''; 
   event.cancelBubble=true;">
   <a href="#">About 1</a></p>

The only code of interest here is the call to event.cancelBubble. Without canceling the event in the <p> element, IE5 will propagate the event to the parent <div> where hideSubMenu() is called. The result would be that the sub-menu would become visible and then immediately disappear. Thats not very user friendly!

With a little work, this simple menu system can do many things. For example, you have the ability to place your menus wherever youd like. I used a horizontal menu bar but implementing a vertical bar shouldnt be all that difficult. Just match the top property of the menus to the triggers instead of the left when positioning. This is what DHTML is supposed to be like: a unified object model, an intuitive design process, and no bloated graphics. Its getting to be fun again!


Tom Duffy is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the College's in-house Web design studio.
Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap