メニューナビ
メニュー表示を行います。以下例題の実行画面です。
![図3:例題実行画面](http://cz-cdn.shoeisha.jp/static/images/article/5377/PL_menunav_Top.gif)
メニュー表示のためのHTMLの書き方は以下のリスト2のようになります。
<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を見てください。
<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をみてください。
YUI().use("node-menunav", function(Y) { var menu = Y.one("#menu_top"); menu.plug(Y.Plugin.NodeMenuNav,{ autoSubmenuDisplay: true }); });
.plug()にはY.Plugin.NodeMenuNavを指定します。以下に、2番目の引数の内容を表に示します。
オプション | 概要 | デフォルト |
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"を追加します。以下はメニューを縦に表示した例題の実行画面です。