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
 

Above and Beyond DHTML Menus : Page 3

Few Web development tasks are messier or more tedious than implementing a DHTML hierarchical menu. Fortunately, all that spaghetti code is going away. Here's what the future of hierarchical menus looks like for Mozilla.


advertisement
Style Your XUL Menus with CSS
You can apply in-line CSS styles to XUL menu tags just as you can to ordinary HTML tags. If you add some ID's to the <menuitem> tags, then you can apply CSS stylesheets directly to the page. Since the page content is XML, not HTML, you have to use <?xml-stylesheet href="url"?> rather than <STYLE rc="url"> to include the stylesheet. Here's an example style rule:

menuitem#top { color : red; background-color : white; font-weight : bold; font-style : italic; }

The preceding rule applies to all items with an ID of "top," so adding the id="top" attribute to the first menu item in each menu changes its appearance to blend in with or stand out from the rest of the page.

Not only do XUL menus respond directly to styles, they also respond to JavaScript event handlers. The great convenience of XUL menus is that you don't have to code endless mouseover and mouseout handlers. Instead, XUL provides the simple command handler. It fires when a menu item already highlighted with the mouse is selected by the user. Menu item selection is done by releasing the mouse button with the mouse pointer, just as for any mouse-driven menu. If there's no specific handler assigned to a given menu item, then any generic outer command handlers will pick up the user action. Here's the menu code again, with the handlers and id's added:

<xul:menulist> <xul:menupopup oncommand="alert( 'Catchall Action')"> <xul:menuitem id="top" label="Item 1"/> ... <xul:menuitem id="top" label="Leaf 1" oncommand="alert('L1')"/> ... </xul:menulist>

In the browser, the menu now looks like Figure 2.



Nigel McFarlane is a freelance science and technology writer, analyst and programmer. His most recent work is "Rapid Application Development with Mozilla" (Prentice Hall PTR, Nov 2003). See his Web site at www.nigelmcfarlane.com or reach him by e-mail here.
Comment and Contribute

 

 

 

 

 


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

 

 

Thanks for your registration, follow us on our social networks to keep up-to-date