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>
  




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[sjscript]
claudebot
24/03/29 05:17:17
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube