メニューナビ
メニュー表示を行います。以下例題の実行画面です。
図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）
