Yahoo! UI Library 3（YUI3）プラグイン

Yahoo! UI Library Ver.3 を使ってみよう（8）

メニューナビ

　メニュー表示を行います。以下例題の実行画面です。

図3：例題実行画面

　メニュー表示のためのHTMLの書き方は以下のリスト2のようになります。

［リスト2］メニューの書き方（PL_menunav_Top.html）

<div id="menu-1" class="yui3-menu">
  <div class="yui3-menu-content">
    <ul>
      <li class="yui3-menuitem">        //（1）
        <a class="yui3-menuitem-content" href="http://www.yahoo.com">ヤフー</a>
      </li>
      <li class="yui3-menuitem">        //（2）
        <a class="yui3-menuitem-content" href="http://www.yahoo.com">コンテンツ</a>
      </li>
    </ul>
  </div>
</div>

　まず<body class="yui3-skin-sam">を指定します。（1）（2）はメニュー項目の並びです。各メニュー項目にサブメニューをつける場合は、リスト3を見てください。

［リスト3］モジュールnode-menunav

<li class="yui3-menuitem">        //（2）
  <a class="yui3-menuitem-content" href="http://www.yahoo.com">コンテンツ</a>
    <div>
       <div>
          <ul>
            <li>
                 //ここにサブメニューを書く
            </li>
          </ul>
       <div>
    </div>
</li>

　<li></li>の間に<div><div><ul><li>を入れます。サブメニュー内に区切りを入れたい場合は<div><div><ul><li></li></ul><ul><li>と<ul>でまとめます。

　モジュールはnode-menunavを指定します。リスト4をみてください。

［リスト4］モジュールnode-menunav

YUI().use("node-menunav", function(Y) {
	  var menu = Y.one("#menu_top");
    menu.plug(Y.Plugin.NodeMenuNav,{
        autoSubmenuDisplay: true
    });
});

　.plug()にはY.Plugin.NodeMenuNavを指定します。以下に、2番目の引数の内容を表に示します。

Y.Plugin.NodeFocusManagerの設定項目

オプション	概要	デフォルト
autoSubmenuDisplay	mouseoverで自動的に小項目を表示するか	true
submenuShowDelay	mouseoverで、サブメニューを表示する時間（ミリ秒）	250
submenuHideDelay	mouseoutでサブメニューを消す時間（ミリ秒）	250

　メニューを縦に表示したいときは、リスト2の<div id="menu-1" class="yui3-menu">に <div id="menu_top" class="yui3-menu yui3-menu-horizontal">とclassの"yui3-menu-horizontal"を追加します。以下はメニューを縦に表示した例題の実行画面です。

図4：例題実行画面（PL_menunav_Left.html）