Multitiered-Menusub-menu-From-Markup

YUI Library JavaScript DHTML


            



    
Multi-tiered Menu From 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;
    
    }




Multi-tiered Menu From Markup


  This example demonstrates how to create a multi-tiered menu using existing markup on the page.


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("productsandservices", function () {
        /*
            Instantiate the menu and corresponding submenus. The first argument passed 
            to the constructor is the id of the element in the DOM that represents 
            the menu; the second is an object literal representing a set of 
            configuration properties for the menu.
        */ 
        var oMenu = new YAHOO.widget.Menu("productsandservices", { 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

    
        
            
            
                Communication
                
                    
                        
                            360°
                            Alerts
                            Avatars
                            Groups
                            Internet Access
                            
                            
                                PIM
                            
                                
                                    
                                        
                                            Yahoo! Mail
                                            Yahoo! Address Book
                                            Yahoo! Calendar
                                            Yahoo! Notepad