GUI Components JavaScript DHTML


                    "http://www.w3.org/TR/html4/strict.dtd">

    
        
        Website Top Nav (with submenus built from markup)
        
        
        
        
        
        
        
  
        
        
            div.yui-b p {
            
                margin:0 0 .5em 0;
                color:#999;
            
            }
            
            div.yui-b p strong {
            
                font-weight:bold;
                color:#000;
            
            }
            
            div.yui-b p em {
                color:#000;
            
            }            
            
            h1 {
                padding:.25em .5em;
                background-color:#ccc;
            }
            #productsandservices {
            
                margin:0 0 10px 0;
            
            }
            
            div.yuimenu {
            
                position:absolute;
            
            }
        
        
        
        
        
        
        
        
        
        
        
        
            // "load" handler for the window
            YAHOO.example.onWindowLoad = function(p_oEvent) {
                // Hides submenus of the root Menubar instance
                
                function hideSubmenus() {
                    if(oMenuBar.activeItem) {
                    
                        var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
                        if(oSubmenu) {
                        
                            oSubmenu.hide();
                        
                        }
                    
                    }
                }    
                // Cancels the call to "hideSubmenus"
                function cancelTimer() {
                    if(nTimeoutId) {
    
                        window.clearTimeout(nTimeoutId);
    
                    }
                
                }
    
    
                // "mouseout" event handler for each submenu of the menubar
                
                function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
    
                    cancelTimer();
    
                    nTimeoutId = window.setTimeout(hideSubmenus, 750);
                
                }
    
    
                // "mouseover" handler for each item in the menubar
    
                function onMenuBarItemMouseOver(p_sType, p_aArguments, p_oMenuItem) {
                
                    var oActiveItem = this.parent.activeItem;
                
                
                    // Hide any other submenus that might be visible
                
                    if(oActiveItem && oActiveItem != this) {
                
                        this.parent.clearActiveItem();
                
                    }
                
                
                    // Select and focus the current MenuItem instance
                
                    this.cfg.setProperty("selected", true);
                    this.focus();
                
                
                    // Show the submenu for this instance
                
                    var oSubmenu = this.cfg.getProperty("submenu");
                
                    if(oSubmenu) {
                
                        oSubmenu.show();
                
                    }
                
                }
            
    
                // "mouseout" handler for each item in the menubar
            
                function onMenuBarItemMouseOut(p_sType, p_aArguments, p_oMenuItem) {
                
                    this.cfg.setProperty("selected", false);
                
                
                    var oSubmenu = this.cfg.getProperty("submenu");
                
                    if(oSubmenu) {
                
                        var oDOMEvent = p_aArguments[0],
                            oRelatedTarget = YAHOO.util.Event.getRelatedTarget(oDOMEvent);
                
                        if(
                            !(
                                oRelatedTarget == oSubmenu.element || 
                                this._oDom.isAncestor(oSubmenu.element, oRelatedTarget)
                            )
                        ) {
                
                            oSubmenu.hide();
                
                        }
                
                    }
                
                }
                var nTimeoutId;
                // Instantiate and render the menubar and corresponding submenus
                var oMenuBar = new YAHOO.widget.MenuBar("productsandservices");
                oMenuBar.render();
                /*
                    Add a "mouseover" and "mouseout" event handler each item 
                    in the menu bar 
                */               
                var aMenuBarItems = oMenuBar.getItemGroups()[0],
                    i = aMenuBarItems.length - 1;
                do {
                    aMenuBarItems[i].mouseOverEvent.subscribe(onMenuBarItemMouseOver);
                    aMenuBarItems[i].mouseOutEvent.subscribe(onMenuBarItemMouseOut);
                
                }
                while(i--);
                // Assign event handlers
                // Add a "mouseover" handler to the menubar
                oMenuBar.mouseOverEvent.subscribe(cancelTimer);
                var oCommunication = oMenuBar.getItem(0).cfg.getProperty("submenu"),
                    oPIM = oCommunication.getItem(5).cfg.getProperty("submenu"),
                    oShopping = oMenuBar.getItem(1).cfg.getProperty("submenu"),
                    oEntertainment = oMenuBar.getItem(2).cfg.getProperty("submenu"),
                    oInformation = oMenuBar.getItem(3).cfg.getProperty("submenu");
                // Add a "mouseover" event handler to each submenu
                
                oCommunication.mouseOverEvent.subscribe(cancelTimer);
                oPIM.mouseOverEvent.subscribe(cancelTimer);
                oShopping.mouseOverEvent.subscribe(cancelTimer);
                oEntertainment.mouseOverEvent.subscribe(cancelTimer);
                oInformation.mouseOverEvent.subscribe(cancelTimer);
                // Add a "mouseout" event handler to each submenu
                oCommunication.mouseOutEvent.subscribe(onSubmenuMouseOut, oCommunication, true);
                oPIM.mouseOutEvent.subscribe(onSubmenuMouseOut, oPIM, true);
                oShopping.mouseOutEvent.subscribe(onSubmenuMouseOut, oShopping, true);
                oEntertainment.mouseOutEvent.subscribe(onSubmenuMouseOut, oEntertainment, true);
                oInformation.mouseOutEvent.subscribe(onSubmenuMouseOut, oInformation, true);
                // Add a "click" handler to the document
                YAHOO.util.Event.addListener(document, "click", hideSubmenus);
            }
            // Add a "load" handler for the window
            YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
        
    
    
        
            
                
                
                    Website Top Nav (with submenus built from markup) [Examples Home]


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