"toolbar" */
            .ytoolbar {
                border-top-width: 2px;
                border-top-color: #ddd;
                border-top-style: solid;
                background-color: #ccc;
                position: absolute;
                bottom: 0;
                width: 100%;
            
            }
            /* Style the "Yahoo!" anchor to look like a button */
            .ytoolbar #yahoo {
            
                border-width: 2px;
                border-color: #ddd #666 #666 #ddd;
                border-style: solid;
                float: left;
                *float: none;   /* For IE */
                *display: inline-block; /* For IE */
                padding: 4px 12px 4px 28px;
                margin: 4px;
                background-color: #ccc;
                color: #000;
                text-decoration: none;
                background: url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) 10% 50% no-repeat;
            
            }
            .ytoolbar #yahoo: active {
                border-color: #666 #ddd #ddd #666;
            
            }
            /* Define a new style for each menu */
            .yui-skin-sam .yuimenu {
            
                line-height: 2;  /* ~24px */
                *line-height: 1.9; /* For IE */
            
            }
            .yui-skin-sam .yuimenu .bd {
                border-width: 2px;
                border-color: #ddd #666 #666 #ddd;
                border-style: solid;
                background-color: #ccc;
            
            }
            /* Define a new style for each MenuItem instance. */
            .yui-skin-sam #yproducts li.yuimenuitem .yuimenuitemlabel {
                background: url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) no-repeat 4px;
                padding: 0 20px 0 24px;
            }
            .yui-skin-sam #yproducts li.yuimenuitem {
            
                /*
                    For IE 7 Quirks and IE 6 Strict Mode and Quirks Mode:
                    Used to collapse superfluous white space between 

 
                    elements that is triggered by the "display" property of the
                     elements being set to "block."
                */
            
                _border-bottom: solid 1px #ccc;
            
            }
            /* Define a new style for a MenuItem instance's "selected" state. */
            .yui-skin-sam #yproducts .yuimenuitem-selected {
                background-color: #039;
            }
            .yui-skin-sam #yproducts .yuimenuitemlabel-selected {
                color: #fff;
            }
            
            /* Add unique icons to some of the MenuItem instances. */
            .yui-skin-sam #yproducts li#help .yuimenuitemlabel {
                background-image: url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/hlp16_1.gif);
            
            }
            .yui-skin-sam #yproducts li#search .yuimenuitemlabel {
                background-image: url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/srch16_1.gif);
            
            }
            .yui-skin-sam #yproducts li#goto .yuimenuitemlabel {
                background-image: url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/arorght16_1.gif);
            }
        
        
        
        
        
        
        
        
            /*
                 Initialize and render the MenuBar when its elements are ready 
                 to be scripted.
            */
            YAHOO.util.Event.onContentReady("yproducts", function () {
                var oPanel = new YAHOO.widget.Panel(
                                    "exampleinfo", 
                                    { 
                                        constraintoviewport: true,
                                        fixedcenter: true,
                                        width: "400px",
                                        zindex: 1
                                    }
                                );
                 oPanel.setHeader("OS-Style Programs Menu Example");
                 oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu.");
                 oPanel.render(document.body);            
            
                /*
                    Apply the "ytoolbar" class to the 

 so that it is styled 
                    like an application toolbar.
                */
                var oH1 = document.getElementsByTagName("h1")[0];
                YAHOO.util.Dom.addClass(oH1, "ytoolbar");
                /*
                     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("yproducts", { zindex: 2 });
                /*
                     Aligns the bottom-left corner of Menu instance to the  
                     top-left corner of the Yahoo! anchor element that is 
                     its context element.
                */
                function positionMenu() {
                    oMenu.align("bl", "tl");
                }
                // "click" handler for the "Go to..." menu item
    
                function onGotoClick() {
                
                    var sURL = window.prompt("Enter a URL: ","");
    
                    if (sURL && sURL.length > 0) {
                        
                        document.location = sURL;
    
                    }
                
                }
                /*
                      Add an additional item to the Menu instance.  Unlike the 
                      other items in the Menu instance, this item is added via 
                      script since its functionality requires JavaScript.
                */
                oMenu.addItem({ text: "Go to...", id: "goto", onclick: { fn: onGotoClick } });
                /*
                    "beforeShow" event listener - used to position the 
                    root Menu instance when it is displayed.
                */
                oMenu.subscribe("beforeShow", function () {
                
                    if (this.getRoot() == this) {
                        positionMenu();
                    }
                
                });
                /*
                     Call the "render" method with no arguments since the 
                     markup for this menu already exists in the pages.
                */
                oMenu.render();
                /*
                    Position the bottom-left corner of the root menu to the 
                    top-left corner of the "Yahoo!" anchor element.
                */
                oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
                // "click" event handler for "Yahoo!" button
    
                function onYahooClick(p_oEvent) {
    
                    // Position and display the menu
                    
                    positionMenu();
                    oMenu.show();
  
                    // Stop propagation and prevent the default "click" behavior
    
                    YAHOO.util.Event.stopEvent(p_oEvent);
                    
                }
                /*
                    Assign a "click" event handler to the "Yahoo!" anchor that 
                    will display the menu
                */
                
                YAHOO.util.Event.addListener("yahoo", "click", onYahooClick);
                /*
                    Add a "resize" event handler for the window that will 
                    reposition the H1 "toolbar" to the bottom of the viewport
                */
                YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionMenu);
            
            });
        
    
    
        
        

Yahoo!

        
            
                

                    
• Products
                          
                              
                                  
  
                                    
  • Yahoo! Mail
  
                                    
  • Yahoo! Address Book
  
                                    
  • Yahoo! Calender
  
                                    
  • Yahoo! Notepad
  
                                    
  • Yahoo! Messenger
  
                                    
  • Yahoo! 360
  
                                    
  • Flickr Photo Sharing
  
                                      
  • Finance
  
                                      
  • Entertainment
                                            
                                                
                                                    
    
                                                      
    • Yahoo! Music
    
                                                      
    • Yahoo! Movies
    
                                                      
    • Yahoo! TV