Menu Family: Website Left Nav Using Animation With Submenus Built From Markup

Ajax Javascript YUI Menu Anim

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

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

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

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

YAHOO.widget.ContainerEffectには、もうひとつSLIDEというeffectがよういされている（YAHOO.widget.ContainerEffectのAPIドキュメントはこちら）。
これは、画面のそとから、表示する場所にスライドインしてきて、消える際に画面の外にスライドアウトしていく。この例で適用すると、サブメニューが画面の左からスライドインして、右にスライドアウトしていく（面白いが、この例では適切ではなさそうだ）


<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.MarkupMenu = function() {

	var oMenu;
	
	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: {