スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

 今回はYUIライブラリを使って下に展開する横メニューを設置してみます。メニューの内容はJavaScriptに書き込むので外部化するとメニューの追加も楽になるかと思います。ウェブサイトの場合すべてのページのメニューを変更するのは大変ですからね。

 メニューの中身はサンプルのままになっていますがご容赦ください。下に展開したメニューはさらに右に展開させることもできます。設置するにはまず外部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>
 次にメニューの内容をJavaScriptで記述します。
<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>
 最後にbody内にメニューを設置します。
<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>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。