04
05
YUIライブラリを使った下に展開する横メニュー
2008-04-05メニューの中身はサンプルのままになっていますがご容赦ください。下に展開したメニューはさらに右に展開させることもできます。設置するにはまず外部JavaScriptとCSSを呼び込みます。
<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.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu.js"></script>次にメニューの内容をJavaScriptで記述します。
<script type="text/javascript">
YAHOO.util.Event.onContentReady("productsandservices", function () {
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
autosubmenudisplay: true,
hidedelay: 750,
lazyload: true });
var aSubmenuData = [
{
id: "communication",
itemdata: [
{ text: "360", url: "http://360.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{
text: "PIM",
submenu: {
id: "pim",
itemdata: [
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" }
]
}
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" }
]
},
{
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" }
]
},
{
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" }
]
},
{
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
]
}
];
oMenuBar.subscribe("beforeRender", function () {
if (this.getRoot() == this) {
this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0])
this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
}
});
oMenuBar.render();
});
</script>
最後にbody内にメニューを設置します。
<div class="yui-skin-sam" id="yahoo-com">
<div id="productsandservices" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#communication">Communication</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="#">Information</a>
</li>
</ul>
</div>
</div>
</div>
