YAHOO UI メニュー( 通常横タイプ )

指定位置、対親幅100%横メニュー

ページスタイル

<STYLE type="text/css">
* {
	font-family: "ＭＳ Ｐゴシック";
	font-size: 12px;
}
BODY {
	background-color: white;
	color: black;
}

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

/* トップメニューの色や形状 */
#menuunit_style_1 {

}

/* サブメニューの色や形状 */
.bd {

}

/* メニュー共通 */
.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: "ＭＳ Ｐゴシック" !important;
	font-size: 12px !important;
	text-align: left;
}

</STYLE>

外部ライブラリ

<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

メインユニット

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

スクリプト

<script type="text/javascript">

var oMenu = new YAHOO.widget.MenuBar(
		"menuunit_1", 
		{
			autosubmenudisplay: true,
			hidedelay: 750, 
			lazyload: true
		}
	);


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>