SQLの窓

2010年12月16日


google.load で Yahoo UI のメニューを使う

fonts は見栄えをサンプルと同じにする為に必要です。サンプルでは、body 要素にyui-skin-sam クラスが設定されていましたが、親要素に設定します。
<script	type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script	type="text/javascript">
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
	require: ['menu','fonts'],
	onSuccess: function() {
		YAHOO.util.Event.onContentReady("basicmenu", function () {
		var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
			document.getElementById("basicmenu").style.display = '';
			oMenu.render();
			YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
		});
	}
}).insert();
</script>

</head>
<body>
<input type='button' value="メニュー表示" id="menutoggle">

<div class="yui-skin-sam" >
<div id="basicmenu" class="yuimenu" style='display:none'>
 <div class="bd">
  <ul class="first-of-type">
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://winofsql.jp">SQLの窓</a></li>
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://www.google.co.jp/">Google</a></li>
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://developer.yahoo.com/yui/yuiloader/">YUI Loader</a></li>
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://twitter.com/">Twitter</a></li>
  </ul>
 </div>
</div>
</div>



タグ:YUI google
【JavaScript ライブラリの最新記事】
posted by lightbox at 2010-12-16 17:24 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり