Grouped-Menu-Items-Using-JavaScript


            



    
Grouped Menu Items Using JavaScript

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}








    /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
    */
    
    div.yuimenu .bd {
    
        zoom: normal;
    
    }




Grouped Menu Items Using JavaScript


  This example demonstrates how to group MenuItem instances.


Note: By default clicking outside of a Menu instance will hide it.  
Additionally, MenuItem instances without a submenu or a URL to navigate to will 
hide their parent Menu instance when clicked.  Click the "Show Menu" button 
below to make the Menu instance visible if it is hidden.




    /*
         Initialize and render the Menu when the element it is to be 
         rendered into is ready to be scripted.
    */
    YAHOO.util.Event.onAvailable("rendertarget", function () {
        /*
    Instantiate a Menu:  The first argument passed to the constructor
    is the id for the Menu element to be created, the second is an 
    object literal of configuration properties.
        */
        var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
        /*
            Add items to the Menu instance by passing an array of object literals 
            (each of which represents a set of YAHOO.widget.MenuItem 
            configuration properties) to the "addItems" method.
        */
        oMenu.addItems([
            [
                { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
                { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
            ],
            [
                { text: "Yahoo! Local", url: "http://local.yahoo.com" },
                { text: "Yahoo! Maps", url: "http://maps.yahoo.com" },
                { text: "Yahoo! Travel", url: "http://travel.yahoo.com" },
                { text: "Yahoo! Shopping", url: "http://shopping.yahoo.com" } 
            
            ],
            [
                { text: "Yahoo! Messenger", url: "http://messenger.yahoo.com" },
                { text: "Yahoo! 360", url: "http://360.yahoo.com" },
                { text: "Yahoo! Groups", url: "http://groups.yahoo.com" },
                { text: "Flickr Photo Sharing", url: "http://www.flickr.com" }
            
            ]
        
        ]);
        /*
            Since this Menu instance is built completely from script, call the 
            "render" method passing in the DOM element that it should be 
            appended to.
        */
        oMenu.render("rendertarget");
        YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
    
    });
    

Show Menu

YUI Library JavaScript DHTML

Grouped Menu Items Using JavaScript