ページ上部のシンプルなメニューの場合。
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 件のコメント:
コメントを投稿