YAHOO UI メニュー の設置方法

  ダウンロード










http://developer.yahoo.com/yui/

( YUI version 2.3.1 で確認しました )

必要なファイルは以下です

  
<link rel="stylesheet" type="text/css" href="YUI/menu.css" />
<script type="text/javascript" src="YUI/yahoo-dom-event.js"></script>
<script type="text/javascript" src="YUI/animation-min.js"></script>
<script type="text/javascript" src="YUI/container_core-min.js"></script>
<script type="text/javascript" src="YUI/menu-min.js"></script>
  

必要なものだけ↓からダウンロードできます( BSD ライセンス )
http://lightbox.on.coocan.jp/download/YUI.lzh

menu.css は、build\menu\assets\skins\sam\menu.css です。
menu.css の中の全ての ../../../../assets/skins/sam/sprite.png を
sprite.png に変更して、YUI ディレクトリに build\assets\skins\sam\sprite.png をコピーして下さい


横に伸びるメニューバーのサンプル




  基本ユニット



  
<div style='position:relative'>
<div class="yui-skin-sam" style='position:absolute;left:0px;top:0;'>
<div id="menuunit_1" class="yuimenu" style=''>
<div id="menuunit_style_1" class="bd">
	<ul class="first-of-type">
		<!-- 基本メニューの1 -->
		<li class="yuimenuitem"><a
			class="yuimenuitemlabel"
			href="http://hp.vector.co.jp/authors/VA003334/"
			target="_blank"
		>SQLの窓1</a></li>
		<!-- 基本メニューの2 -->
		<li class="yuimenuitem"><a
			class="yuimenuitemlabel"
			href="http://winofsql.jp/"
			target="_blank"
		>SQLの窓2</a></li>
		<!-- 基本メニューの3 -->
		<li class="yuimenuitem"><a
			class="yuimenuitemlabel"
			href="http://homepage2.nifty.com/lightbox/"
			target="_blank"
		>SQLの窓3</a></li>
	</ul>
</div>
</div>
</div>
</div>
  



  個別スタイル

  
<style type="text/css">

/* メニュー本体 */
#menuunit_1 {
	visibility:hidden;	/* 初期状態 : 元々は ul-li なので非表示にする */
	width:200px;
}

/* トップメニューの色や形状 */
#menuunit_style_1 {
	background-color:darkgreen !important;
	border-style: none !important;
	border-color: skyblue !important;

}

/* サブメニューの色や形状 */
.bd {
	background-color:forestgreen !important;
	border-style: solid !important;
	border-color: black !important;
}

/* メニュー共通 */
.bd A:link	{ color:black; font-weight:bold; }
.bd A:visited	{ color:black; font-weight:bold; }
.bd A:active	{ color:black; font-weight:bold; }
.bd A:hover	{ color:red;   font-weight:bold; }
.bd A {
	font-family: "MS Pゴシック" !important;
	font-size: 14px !important;
	text-align: left;
}

</style>
  



  JavaScript

YAHOO.util.Event.onContentReady は、取り込む HTML 定義がロードされるまで待つ処理なので、
ページに既に onload 処理があるとうまくいかない可能性があります。

そういう場合は、普通に HTML 定義の後に SCRIPT を書いてロードするといいでしょう。
( その場合、YAHOO.util.Event.onContentReady("menuunit_1", function () { と最後の }); を削除 )

  
<script type="text/javascript">

YAHOO.util.Event.onContentReady("menuunit_1", function () {

var oMenu = new YAHOO.widget.Menu(
		"menuunit_1", 
		{
			position: "static", 
			hidedelay: 750, 
			lazyload: true, 
			effect: { 
				effect: YAHOO.widget.ContainerEffect.FADE,
				duration: 0
			}
		}
	);


oMenu.beforeRenderEvent.subscribe(function () {

	var oSubmenuData = {
	
	"SQL1": [ 
	
		{
			text: "楽じゃない空間",
			url: "http://lightbox.on.coocan.jp/",
			target: "_blank"
		},

		{
			text: "RunDLL32.EXE 抜粋",
			url: "http://winofsql.jp/pinpoint/rundll32.htm",
			disabled: true,
			target: "_blank" 
		}
	
	],

	"SQL2": [

		{
			text: "PHP : リコンパイルバージョン",
			url: "http://homepage2.nifty.com/lightbox/php.chm",
			target: "_blank"
		},

		{
			text: " ",
			url: "#",
			disabled: true
		},

		{ text: "IT用語辞典", submenu: { id: "outerlink", itemdata: [

			{
				text: "資料室",
				url: "http://e-words.jp/p/r.html",
				target: "_blank"
			},

			{
				text: "HTMLの特殊文字",
				url: "http://e-words.jp/p/r-htmlentity.html",
				target: "_blank" 
			},

			{ text: "IT用語辞典", submenu: { id: "outerlink2", itemdata: [

				{
					text: "資料室",
					url: "http://e-words.jp/p/r.html",
					target: "_blank"
				},
				{
					text: "HTMLの特殊文字",
					url: "http://e-words.jp/p/r-htmlentity.html",
					target: "_blank" 
				}

			] } }, 

		] } }

	],
	
	"SQL3": [

		{
			text: "ASP と PHP の処理比較",
			url: "http://winofsql.jp/pinpoint/vbscriptphpframe.htm",
			target: "_blank"
		},

		{
			text: "VBScript の真偽比較表",
			url: "http://winofsql.jp/pinpoint/vbscripttruefalse.htm",
			target: "_blank"
		}
	
	]
	
	};

	this.getItem(0).cfg.setProperty("submenu",
		{ id: "SQL1", itemdata: oSubmenuData["SQL1"] });
	this.getItem(1).cfg.setProperty("submenu",
		{ id: "SQL2", itemdata: oSubmenuData["SQL2"] });
	this.getItem(2).cfg.setProperty("submenu",
		{ id: "SQL3", itemdata: oSubmenuData["SQL3"] });

});

oMenu.render();

});

</script>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ