2009年3月5日木曜日

YUIの Menu Control Widgetを最小限のコードで使う例

ページ上部のシンプルなメニューの場合。
YUI Loaderを使うと一瞬、素のHTMLが表示されるので、事前にCSS・JavaScriptを読み込んでセットアップしたほうが見栄えがよい。

(2009/03/15 追記:htmlのbody要素開始タグにclass属性を追加)


CSS

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/assets/skins/sam/menu.css">

<style type="text/css">
.active-menu{
/* アクティブなメニューボタンの装飾をする */
background: #fff;
}
</style>

JavaScript
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onContentReady("menu", function(){ new YAHOO.widget.MenuBar("menu"); });
</script>

HTML
<body class="yui-skin-sam">
<div id="menu" class="yuimenubarnav">
<div class="bd">
<ul>
<li class="active-menu"><a class="yuimenuitemlabel" href="http://google.jp">google</a></li>
<li><a class="yuimenuitemlabel" href="http://yahoo.jp">yahoo</a></li>
<li><a class="yuimenuitemlabel" href="http://goo.jp">goo</a></li>
</ul>
</div>
</div>

0 件のコメント:

ブログ アーカイブ

tags