Grouped-Menu-Items-Using-Markup

YUI Library JavaScript DHTML


            



    
Grouped Menu Items Using Markup

/*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;
}








    /*
        Position and hide the Menu instance to prevent a flash of unstyled 
        content when the page is loading.
    */
    div.yuimenu {
    
        position: absolute;
        visibility: hidden;
    
    }
    
    /*
        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 Markup


  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.




    // Instantiate and render the menu when it is available in the DOM
    YAHOO.util.Event.onContentReady("menuwithgroups", function () {
        /*
             Instantiate a Menu:  The first argument passed to the 
             constructor is the id of the element in the page 
             representing the Menu; the second is an object literal 
             of configuration properties.
        */
        var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
        /*
             Call the "render" method with no arguments since the 
             markup for this Menu instance is already exists in the page.
        */
        oMenu.render();
        YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
    
    });
    

Show Menu

    
        
            Yahoo! Mail
            Yahoo! Address Book
            Yahoo! Calendar
            Yahoo! Notepad
        
        
            Yahoo! Local
            Yahoo! Maps
            Yahoo! Travel
            Yahoo! Shopping
        

        
            Yahoo! Messenger
            Yahoo! 360
            Yahoo! Groups
            Flickr Photo Sharing