Example 13 : Menu 2 : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Menu 2 »

 

Example 13




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example 13: Multi-tiered Menu with Progressive Rendering of Submenus</title>

        <!-- Standard reset and fonts -->
        <link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">

        <!-- Logger CSS -->
        <link rel="stylesheet" type="text/css" href="./build/logger/assets/logger.css">

        <!-- CSS for Menu -->
        <link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
         
        <!-- Page-specific styles -->
        <style type="text/css">

            #logs {

                position:absolute;
                bottom:0;
                right:0;
            
            }

            .example13 {

                background-color:#9c9;
            
            }

        </style>        

        <!-- Namespace source file -->
        <script type="text/javascript" src="./build/yahoo/yahoo.js"></script>

        <!-- Dependency source files -->
        <script type="text/javascript" src="./build/event/event.js"></script>
        <script type="text/javascript" src="./build/dom/dom.js"></script>
            
        <!-- Logger source file -->
        <script type="text/javascript" src="./build/logger/logger.js"></script>
        
        <!-- Container source file -->
        <script type="text/javascript" src="./build/container/container_core.js"></script>

        <!-- Menu source file -->
        <script type="text/javascript" src="./build/menu/menu.js"></script>

        <!-- Page-specific script -->
        <script type="text/javascript">

            YAHOO.example.onWindowLoad = function(p_oEvent) {

                /*
                     Use a JSON-formatted data structure to define the data for 
                     the submenus of the root menu
                */

                var oMenuData = {
                
                    "communications"
                    
                        text: "360", url: "http://360.yahoo.com" },
                        text: "Alerts", url: "http://alerts.yahoo.com" },
                        text: "Avatars", url: "http://avatars.yahoo.com" },
                        text: "Groups", url: "http://groups.yahoo.com " },
                        text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                        text: "PIM", submenuId: "pim", submenuItems: [

                                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: "Member Directory", url: "http://members.yahoo.com" },
                        text: "Messenger", url: "http://messenger.yahoo.com" },
                        text: "Mobile", url: "http://mobile.yahoo.com" },
                        text: "Photos", url: "http://photos.yahoo.com" },
                    
                    ],

                    "shopping"[

                        text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                        text: "Autos", url: "http://autos.yahoo.com" },
                        text: "Classifieds", url: "http://classifieds.yahoo.com" },
                        text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                        text: "Points", url: "http://points.yahoo.com" },
                        text: "Real Estate", url: "http://realestate.yahoo.com" },
                        text: "Travel", url: "http://travel.yahoo.com" },
                        text: "Wallet", url: "http://wallet.yahoo.com" },
                        text: "Yellow Pages", url: "http://yp.yahoo.com" }
                    
                    ],

                    "entertainment"[
                    
                        text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                        text: "Games", url: "http://games.yahoo.com" },
                        text: "Kids", url: "http://www.yahooligans.com" },
                        text: "Music", url: "http://music.yahoo.com" },
                        text: "Movies", url: "http://movies.yahoo.com" },
                        text: "Radio", url: "http://music.yahoo.com/launchcast" },
                        text: "Travel", url: "http://travel.yahoo.com" },
                        text: "TV", url: "http://tv.yahoo.com" }              
                    
                    ],

                    "information"[
                    
                        text: "Downloads", url: "http://downloads.yahoo.com" },
                        text: "Finance", url: "http://finance.yahoo.com" },
                        text: "Health", url: "http://health.yahoo.com" },
                        text: "Local", url: "http://local.yahoo.com" },
                        text: "Maps & Directions", url: "http://maps.yahoo.com" },
                        text: "My Yahoo!", url: "http://my.yahoo.com" },
                        text: "News", url: "http://news.yahoo.com" },
                        text: "Search", url: "http://search.yahoo.com" },
                        text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                        text: "Weather", url: "http://weather.yahoo.com" }
                    
                    ]

                };


                /*
                     "beforeshow" handler for each submenu of the root 
                     Menu instance
                */

                function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu) {

                    // Check if the menu has any items. If not, add them                

                    if(this.getItemGroups().length == 0) {

                        YAHOO.log(("Menu " this.id + " has no items yet, so they need to be added.")"info""example13");

                        var aItemsData = this.itemsData,
                            nItems = aItemsData.length,
                            oItemData,
                            oItemConfig,
                            oSubmenu;


                        for(var i=0; i<nItems; i++) {

                            oItemData = aItemsData[i];

                            if(oItemData) {

                                oItemConfig = {};
    
                                if(oItemData.url) {
                                
                                    oItemConfig.url = oItemData.url;
                                
                                }
                                
    
                                if(oItemData.submenuItems) {
    
                                    oSubmenu = new YAHOO.widget.Menu(oItemData.submenuId);

                                    oSubmenu.itemsData = oItemData.submenuItems;

                                    oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
    
                                    oItemConfig.submenu = oSubmenu;
                                
                                }
    
                                // Add the new YAHOO.widget.MenuItem instance to the Menu
    
                                this.addItem(new YAHOO.widget.MenuItem(oItemData.text, oItemConfig));

                                YAHOO.log(("Added item "" + oItemData.text + "" to menu: " this.id)"info""example13");

                            }

                        }


                        /*
                            Render the submenu into its parent MenuItem 
                            instance's element
                        */

                        this.render(this.parent.element);
                        
                    }
                    else {

                        YAHOO.log(("Menu " this.id + " has all of its items, so no need to add them.")"info""example13");
                    
                    }
                    
                }


                // Initialize the root menu

                var oProductsServicesMenu = new YAHOO.widget.Menu("productsandservices");


                // Initialize the submenus of the items in the root menu

                var oCommunicationsMenu = new YAHOO.widget.Menu("communications"),
                    oShoppingMenu = new YAHOO.widget.Menu("shopping"),
                    oEntertainmentMenu = new YAHOO.widget.Menu("entertainment"),
                    oInformationMenu = new YAHOO.widget.Menu("information");


                /*
                     Add a property ("itemsData") to each submenu that 
                     is reference to the data for its items.
                     This data will be used in the "beforeshow" handler to add
                     the items to each submenu before it is displayed.
                */

                oCommunicationsMenu.itemsData = oMenuData["communications"];
                oShoppingMenu.itemsData = oMenuData["shopping"];
                oEntertainmentMenu.itemsData = oMenuData["entertainment"];
                oInformationMenu.itemsData = oMenuData["information"];
                

                /*
                     Assign a "beforeshow" handler to each submenu of the 
                     items in the root menu.
                */

                oCommunicationsMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oCommunicationsMenu, true);
                oShoppingMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oShoppingMenu, true);
                oEntertainmentMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oEntertainmentMenu, true);
                oInformationMenu.beforeShowEvent.subscribe(onMenuBeforeShow, oInformationMenu, true);


                // Add the empty submenus to the items in the root menu instance 

                oProductsServicesMenu.getItem(0).cfg.setProperty("submenu", oCommunicationsMenu);
                oProductsServicesMenu.getItem(1).cfg.setProperty("submenu", oShoppingMenu);
                oProductsServicesMenu.getItem(2).cfg.setProperty("submenu", oEntertainmentMenu);
                oProductsServicesMenu.getItem(3).cfg.setProperty("submenu", oInformationMenu);


                // Render and display the root menu

                oProductsServicesMenu.render();
                oProductsServicesMenu.show();
                

                var oLogs = document.createElement("div");
                oLogs.id = "logs";
                
                document.body.appendChild(oLogs);

                var oLogReader = new YAHOO.widget.LogReader("logs");                
                
            }


            YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
            
        </script>

    </head>
    <body>

        <h1>Example 13: Multi-tiered Menu with Progressive Rendering of Submenus</h1>
        <p>This example demonstrates how to create a menu with submenus that are rendered on the fly.</p>

        <div id="productsandservices" class="yuimenu">
            <div class="bd">
                <ul class="first-of-type">
                    <li class="yuimenuitem"><a href="http://communication.yahoo.com">Communication</a></li>
                    <li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a></li>
                    <li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
                    <li class="yuimenuitem">Information</li>
                </ul>            
            </div>
        </div>

    </body>
</html>
           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Menu 2