YUIライブラリを使った下に展開する横メニュー

　メニューの中身はサンプルのままになっていますがご容赦ください。下に展開したメニューはさらに右に展開させることもできます。設置するにはまず外部JavaScriptとCSSを呼び込みます。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/menu/assets/skins/sam/menu.css">  
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container_core.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu.js"></script>

<script type="text/javascript">
    YAHOO.util.Event.onContentReady("productsandservices", function () {
       var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { 
                                                  autosubmenudisplay: true, 
                                                  hidedelay: 750, 
                                                  lazyload: true });
        var aSubmenuData = [                
            {
                id: "communication", 
                itemdata: [ 
                    { text: "360", url: "http://360.yahoo.com" },
                    { text: "Groups", url: "http://groups.yahoo.com " },
                    { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                    {
                        text: "PIM", 
                        submenu: { 
                                    id: "pim", 
                                    itemdata: [
                                        { 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: "Member Directory", url: "http://members.yahoo.com" },
                    { text: "Messenger", url: "http://messenger.yahoo.com" }
                ]
            },
            {
                id: "shopping", 
                itemdata: [
                    { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                    { text: "Autos", url: "http://autos.yahoo.com" },
                    { text: "Classifieds", url: "http://classifieds.yahoo.com" }
                ]    
            },                    
            {
                id: "entertainment", 
                itemdata: [
                    { 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" }             
                ] 
            },                    
            {
                id: "information",
                itemdata: [
                    { text: "Downloads", url: "http://downloads.yahoo.com" },
                    { text: "Finance", url: "http://finance.yahoo.com" },
                    { text: "Health", url: "http://health.yahoo.com" },
                ]
            }                    
        ];
        oMenuBar.subscribe("beforeRender", function () {
            if (this.getRoot() == this) {
                this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0])
                this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
                this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
                this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
            }
        });
        oMenuBar.render();              
    });
</script>

<div class="yui-skin-sam" id="yahoo-com">
  <div id="productsandservices" class="yuimenubar yuimenubarnav">
    <div class="bd">
      <ul class="first-of-type">
        <li class="yuimenubaritem first-of-type">
          <a class="yuimenubaritemlabel" href="#communication">Communication</a>
        </li>
        <li class="yuimenubaritem">
          <a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
        </li>
        <li class="yuimenubaritem">
          <a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
        </li>
        <li class="yuimenubaritem">
          <a class="yuimenubaritemlabel" href="#">Information</a>
        </li>
      </ul>
    </div>
</div>
</div>