スポンサードリンク

Yahoo! User Interface Library - Menu

YUI Menuとは

Overlayの拡張で、右クリックをしたときに出てくるメニューやブラウザの一番上のメニューバーのようなインターフェイスを作成することができます。

詳しくはhttp://developer.yahoo.com/yui/menu/のオリジナルを読まれるのがよいと思います。

Menuを使う前準備

必要なのは6つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/container_core-min.js"></script>
<script type="text/javascript" src="your install path/menu-min.js"></script>
<link rel="stylesheet" type="text/css" href="your install path/menu.css" />

YAHOO.widget.Menu

メニューの作成方法が2通りあるので、両方試して見ます。動作的に違いはないですが、SEO的にはJavaScriptでメニューを作成しないほうがよいのかな？

自分でul, liを記述する

赤字の部分のclass名は意味があるので他の名前にしないように注意

<div id="menu1" class="yuimenu">
    <div class="bd">
        <ul class="first-of-type">
        <li class="yuimenuitem"><a href="#">foo</a></li>
        <li class="yuimenuitem"><a href="#">bar</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
var menu1 = new YAHOO.widget.Menu("menu1");
YAHOO.util.Event.addListener('menu1-button', 'click', menu1.show, menu1, true);
</script>

メニューを表示

メニューが表示された後にEsc(エスケープキー)を押したり、他の部分をクリックしたりすると自動でメニューが消えます。

JavaScriptでメニューリストを作成する

render の引数に"menu2-button"を指定して表示される部分を指定しています。

ここではプロパティーでclicktohide:falseを指定しているので、他の部分をクリックしてもメニューは消えません。消すにはEscキーをプッシュしてください

<script type="text/javascript">
var menu2 = new YAHOO.widget.Menu("menu2", {
    clicktohide:false // 他の部分をクリックしても消さない
});
menu2.addItem(new YAHOO.widget.MenuItem("foo", {url:"http://www.yahoo.co.jp/"}));
menu2.addItem(new YAHOO.widget.MenuItem("bar", {url:"http://www.yahoo.co.jp/"}));
menu2.render("menu2-button"); // ボタン内に描画している
YAHOO.util.Event.addListener('menu2-button', 'click', menu2.show, menu2, true);
</script>
...
<button id="menu2-button">メニューを表示</button>

メニューを表示

YAHOO.widget.ContextMenu

contextmenu (右クリックしたときに表示されるメニュー)を表現することができます。

contextmenuの表示

ContextMenu はtriggerプロパティーを必要とします。下の例ではdocumentを指定していますが、特定のElementを指定することも可能です。

上の例と違いitemdataプロパティーでメニューリストを指定していますが同じことです。

<script type="text/javascript">
    var ctxmenu = new YAHOO.widget.ContextMenu('ctxmenu', {
        trigger: document,
        effect:{ effect:YAHOO.widget.ContainerEffect.FADE, duration:1},
        showdelay: 100, // 表示されるまで0.1秒
        hidedelay: 100, // 消えるまで0.1秒
        itemdata: [ {
            text: "emphasis",
            url: "/",
            emphasis: true, // 強調表示
            checked: true,  // チェックをつける
            target: "_new"  // Aタグのtarget属性
        },{
            text: "strongemphasis",
            url: "/",
            strongemphasis: true, // かなり強調表示
            selected: true,       // 選択済み(フォーカスがあたる)
            target: "_new"
        },{
            text: "disabled",
            url: "/",
            disabled: true, // 選択できない状態
            helptext: "選択できません" // コメント
        },{
            text: "submenu1",
            submenu: {
                id: "submenus",
                itemdata:["サブメニュー1", "サブメニュー2", "サブメニュー3"]
            }
        }]
    });
    ctxmenu.render(document.body);
</script>

trigger: documentなのでこのページどこでも右クリックでリストが表示されます。

注意:Opera は"contextmenu" イベントがないので下の動作を行う必要があります。

• Opera for Windows: Ctrl キー + 左クリック
• Opera for OS X: (⌘) + 左クリック

カスタムイベント

onClick, onKeyDown をハンドリングするサンプルページ

YAHOO.widget.MenuBar

ブラウザのツールバーのようなメニューを実装できます。

メニューバーの表示

ContextMenuの例とまったく同じitemdataを用いてやっていますが、本らには、サブメニューを多用するのがメニューバーっぽいですかね。

<script type="text/javascript">
    var menubar = new YAHOO.widget.MenuBar('menubar', {
        itemdata: [ {
            text: "emphasis",
            url: "/",
            emphasis: true,
            target: "_new",
            checked: true
        },{
            text: "strongemphasis",
            url: "/",
            strongemphasis: true,
            selected: true,
            target: "_new"
        },{
            text: "disabled",
            url: "/",
            disabled: true,
            helptext: "選択できません"
        },{
            text: "submenu2",
            submenu: {
                id: "submenus",
                itemdata:["サブメニュー1", "サブメニュー2", "サブメニュー3"]
            }
        }]
    });
    menubar.render('menu3');
</script>
...
<div id="menu3"></div>

カスタムイベント

onClick, onKeyDown をハンドリングするサンプルページ