Menu Family: Website Left Nav Using Animation With Submenus From JavaScript

Ajax Javascript YUI Menu Anim

このExampleは、先のExample「Menu Family: Website Left Nav With Submenus From JavaScript」を「サブメニューを表示する際に、それが浮かび上がってくるようなEffectをつける」よう改造したものである。（YUIのExampleのページへのリンクはこちら）

したがって、この点を除いて、「Menu Family: Website Left Nav With Submenus From JavaScript」と画面とその動きは変わらない。

以下に、Javascriptを含むhtmlの全体を示す。
これをみると明らかだが、「Menu Family: Website Left Nav With Submenus From JavaScript」との違いは、YAHOO.widget.Menuをインスタンス化する際のコンフィグパラメータ（以下の部分）のみである(Animationを使うため、animation.jsの読み込みが必要なのは言うまでもない)。
ここで、effectという属性を定義して、動きとduration（動きが起こるまでの遅れ）を指定している。YUIのサンプルでは、durationは0.25だが、強調をするため0.5(sec)に変更した。

                    // 表示する際のアニメーション。
                    effect: { 
                       effect: YAHOO.widget.ContainerEffect.FADE,
                       duration: 0.50
                   } 

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>
<!-- 
<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" />
-->
<!-- ヘッダー部、本文（コンテンツ部、メニュー部）、フッター部を分けるグリッド表示のCSS -->
<link rel="stylesheet" type="text/css" href="scripts/yui/reset-fonts-grids/reset-fonts-grids.css">
 
<link rel="stylesheet" type="text/css" href="scripts/yui/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="scripts/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="scripts/yui/animation/animation.js"></script>

<style type="text/css" id="defaultstyle">

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 {
   font-weight: bold;
   margin: 0 0 1em 0;
   padding: .25em .5em;
   background-color: #ccc;
}

#productsandservices {
   position: static;
}
/*
	For IE 6: trigger "haslayout" for the anchor elements in the root Menu by 
	setting the "zoom" property to 1.  This ensures that the selected state of 
	MenuItems doesn't get dropped when the user mouses off of the text node of 
	the anchor element that represents a MenuItem's text label.
*/

#productsandservices .yuimenuitemlabel {
	_zoom: 1;
}

#productsandservices .yuimenu .yuimenuitemlabel {
	_zoom: normal;
}
</style>

<script type="text/javascript">
//モジュールパターンで実装する。
YAHOO.namespace("EGP");

YAHOO.EGP.ScriptMenu = function() {

	var oMenu;
    var aSubmenuData = [
                        {
                            id: "communication", 
                            itemdata: [ 
                                { 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", 
                                    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: "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: "Flickr Photo Sharing", url: "http://www.flickr.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" },
                                { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                                { 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" }                    
                            ]    
                        },
                        
                        {
                            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" },
                                { 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" }              
                            ] 
                        },
                        
                        {
                            id: "information",
                            itemdata: [
                                { 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" }
                            ]
                        }                    
                    ];
    	
	
	return{
    	init: function() {
            /*
		    Menuのインスタンス化；第１引数はMenu部を意味するDivのid.
		          第2引数はCOnfigプロパティー。
	        */
           oMenu = new YAHOO.widget.Menu("productsandservices", 
					// Menuのコンフィグのためのオブジェクトリテラル
                   { 
                        // static Menuの表示。
                        position: "static", 
                        // Menuが消えるまでの時間（msec）
                        hidedelay:  750,
                        // 表示するときまで、レンダリングを待つ。
                        lazyload: true ,
                        // 表示する際のアニメーション。
                        effect: { 
                            effect: YAHOO.widget.ContainerEffect.FADE,
                            duration: 0.50
                        } 
                    }
           );

           oMenu.subscribe("beforeRender", function () {
               // ここで取れるthisは、oMenu（発火するインスタンス）
               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]);
               }
           });

           // stataic Menu（CSSで規定されたメニュー）なので、renderだけで、
           // showはいらない
           oMenu.render();            
   		
		}
	};
}();

//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		//DomReadyイベントで発火するハンドラ
		YAHOO.EGP.ScriptMenu.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.EGP.ScriptMenu,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);

</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class="yui-skin-sam">

<div id="doc" class="yui-t1">
    <div>
      <!-- start: your content here -->
	  <p>ここはヘッダーです。</p>
      <h1>Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)</h1>
       <!-- end: your content here -->
    </div>
	
    <div id="bd">
       <!-- start: primary column from outer template -->
       <div id="yui-main">
         <div class="yui-b">
       		 <p>ここはコンテンツ（本文）です。</p>
             <p><strong>NOTE:</strong> <em>このExampleは、scriptで
             			Effect表示するサブメニューつきのメニューを作る方法を説明しています。</em></p>
             <p>今日はいい天気だ。</p>
             <p>散歩でもしよう。</p>
           </div>
       </div>
       <!-- end: primary column from outer template -->

       <!-- start: secondary column from outer template -->

       <!-- メニュー部 「ajax_yui_menu_multi_tier_from_markup.html」と同じ-->
       <div class="yui-b">

          <div id="productsandservices">
              <div class="bd">
                 <ul>
                     <li class="yuimenuitem"><a href="#communication">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"><a class="yuimenuitemlabel" href="#">Information</a>                      
                     </li>
                   </ul>            
             </div>
         </div>
      </div>
    </div>

    <!-- footer部 -->
    <div>
       <p>ここはフッターです。</p>
    </div>
</div>

</BODY>
</HTML>