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 2

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
Build an XUL-based Menu
A Mozilla <menu> or <menulist> tag usually looks like a button. When a user presses the button a menu pops up. It's the popup part of the menu that you'll see how to create in this article. To see menu popups at work in Mozilla, choose any option from the menu bar or context-click (right click) on any Web page or click the bookmarks icon on the Mozilla Personal Toolbar or...well, you get the idea. Such menu popups can be nested as deeply as you like, they scroll automatically if the menu contains too many items to fit on the screen, they respond to keystrokes, and there are a number of small syntax alternatives that can be used in their construction. That's pretty flexible.

Here's the code for a simple XUL menu. It's embedded in an XML file that otherwise contains only XHTML (two <p> tags):

<?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xul= "http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xul"> <body> <p>Some HTML text and <a href="#"> a link</a>.</p> <xul:menulist> <xul:menupopup> <xul:menuitem label="Item 1"/> <xul:menuitem image="smiley.png" label="image="/> <xul:menuitem src="smiley.png" disabled="true" label="disabled"/> <xul:menuseparator/> <xul:menu label="Sub-Menu"> <xul:menupopup> <xul:menuitem label="-- Item --"/> <xul:menuitem type="radio" label="type=&quot;radio&quot;"/> <xul:menuitem type="checkbox" label="type=&quot;checkbox&quot;"/> <xul:menuitem checked="true" type="checkbox" label="checkbox=&quot;true&quot;"/> <xul:menu label="Another Menu"> <xul:menupopup> <xul:menuitem label="Leaf 1"/> <xul:menuitem label="Leaf 2"/> <xul:menuitem label="Leaf 3"/> </xul:menupopup> </xul:menu> <xul:menuitem label="-- Item --"/> </xul:menupopup> </xul:menu> <xul:menuitem dir="rtl" image="smiley.png" label="reversed"/> <xul:menuitem orient="vertical" image="smiley.png" label="vertical"/> </xul:menupopup> </xul:menulist> <p>More HTML text</p> </body> </html>

The preceding code looks like Figure 1 when loaded into Mozilla.



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