04
04
YUIライブラリを使ってクリックでメニューが現れるボタンを設置
2008-04-04<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/menu/assets/skins/sam/menu.css" /> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container_core-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu-min.js"></script>メニューの内容は次のJavaScriptで記述します。
<script type="text/javascript">
YAHOO.util.Event.onAvailable("rendertarget", function () {
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
oMenu.addItems([
[
{ text: "メニュー1", url: "リンク先のURL" },
{ text: "メニュー2", url: "リンク先のURL" },
{ text: "メニュー3", url: "リンク先のURL" },
{ text: "メニュー4", url: "リンク先のURL" }
],
[
{ text: "メニュー5", url: "リンク先のURL" },
{ text: "メニュー6", url: "リンク先のURL" },
{ text: "メニュー7", url: "リンク先のURL" },
{ text: "メニュー8", url: "リンク先のURL" }
],
[
{ text: "メニュー9", url: "リンク先のURL" },
{ text: "メニュー10", url: "リンク先のURL" },
{ text: "メニュー11", url: "リンク先のURL" },
{ text: "メニュー12", url: "リンク先のURL" }
]
]);
oMenu.setItemGroupTitle("タイトル1", 0);
oMenu.setItemGroupTitle("タイトル2", 1);
oMenu.setItemGroupTitle("タイトル3", 2);
oMenu.render("rendertarget");
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
最後にボタンを設置します。
<button id="menutoggle" type="button">ボタンの中の文字</button>
<div id="rendertarget" class=" yui-skin-sam"></div>
