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

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

HTML pop-up menus are becoming more common in Web applications because they expand the available screen area by placing destination links in an invisible but easily accessed location. However, the process for creating these menus is not as simple as building a list of links. Until recently, you couldn't build a single code base to display pop-up menus in both major browsers; but now that Netscape 6 (NS6) and Internet Explorer 5 (IE5) share much of the same object model, designing and implementing a menu system is easier than ever before.

The Pop-Up Menu Procedure
Heres the procedure:

   1. Create a menu bar across the top of the page
   2. Populate the menu bar with some menu triggers
   3. Position the menus themselves directly beneath the appropriate triggers
   4. Center the triggers on the screen

That sounds simple enough! Start by creating three style sheet rules: one for the menu bar, one for the menu triggers, and one for the menus themselves. The following style tag includes basic hyperlink rules for the links embedded in the menus:



<style> .menu a{ color: white; text-decoration: none; } .menu a:hover{ color: yellow; } .menuBar{ background-color: rgb(50,50,130); position: absolute; top: 0; left: 0; height: 15; z-index: 1; padding: 4px; } .menuTrigger{ font: 10pt Verdana, sans-serif; color: white; background-color: rgb(50,50,130); position: absolute; top: 0; padding: 4px; width: 100; height: 15; z-index: 2; cursor: pointer; cursor: hand; } .menu{ font: 8pt Verdana, sans-serif; color: white; background-color: rgb(50,50,130); position: absolute; top: 23; padding: 4px; width: 100; visibility: hidden; z-index: 2; } </style>

While some of these properties are redundant and could have been combined, I find it easier to read the code when they're entered separately. Note that the height, padding, and top properties for the triggers are identical to those for the menu bars. The top property for the menu rule is equal to the height of the triggers plus twice the padding (top and bottom). Also, note that the menu bar is the only element with a left property; you'll set the left properties for the triggers and menus at run time.

Finally, look at the cursor properties for the menuTrigger rule. There are two cursor properties, one for each browser type. The first one, cursor: pointer, forces NS6 to use a hand-shaped cursor. The second, cursor: hand, does the same thing for IE5. Thankfully, each browser ignores the setting it doesn't understand. The dual property setting replaces the default plain text I-beam cursor with the hand cursor, and lets you avoid wrapping the triggers in <a> elements to change the cursor by trapping mouse events.


Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap