<script src="***/jquery1_3_min.js" type="text/javascript" charset="utf-8"></script>
<script src="***/ddaccordion.js" type="text/javascript" charset="utf-8"></script>

<div class="applemenu">
	<div class="silverheader"><a href="#" title="カテゴリメニュー" target="_blank">カテゴリメニュー</a></div>
	<div class="submenu"> 
	<a href="#" title="アイテム１" target="_blank">アイテム１</a><br />
	<a href="#" title="アイテム２" target="_blank">アイテム２</a><br />
	<a href="#" title="アイテム３" target="_blank">アイテム３</a><br />
	<a href="#" title="アイテム４" target="_blank">アイテム４</a><br />
	<a href="#" title="アイテム５" target="_blank">アイテム５</a><br />
	</div>
</div>

.applemenu{
margin: 5px 0;
padding: 0;
width: 155px; /*width of menu*/
border: 1px solid #9A9A9A;
}
 
.applemenu div.silverheader a{
background: black url(images/silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
 
 
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
 
 
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(images/silvergradientover.gif);
color: white;
}
 
.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
/* height: 300px; */
/*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

ddaccordion.init({
	headerclass: "silverheader",
	contentclass: "submenu",
	revealtype: "mouseover",
	mouseoverdelay: 200,
	collapseprev: true,
	defaultexpanded: [0],
	onemustopen: true,
	animatedefault: false,
	persiststate: true,
	toggleclass: ["", "selected"],
	togglehtml: ["", "", ""],
	animatespeed: "normal",
	oninit:function(headers, expandedindices){
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){
		//do nothing
	}
})

	headerclass: "silverheader", //カテゴリの class名
	contentclass: "submenu", //カテゴリの子class名
	revealtype: "mouseover", //動作トリガ: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //動作トリガ="mouseover"　の場合、アクション起こす最初の時間
	collapseprev: true, //true：一つのカテゴリのみを開く　　/false：複数のカテゴリを開ける
	defaultexpanded: [0], //ロード後開いておくカテゴリ　　open by default [index1, index2, etc] [] denotes no content
	onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //開いた時のデフォルトアニメーション動作
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "selected"], //　クラスをトグルで切り替えられる！　　 ["class1", "class2"]
	togglehtml: ["", "", ""], //画像などを用意したり、htmlを用意できる！　　 ["position", "html1", "html2"] (see docs)
	animatespeed: "normal", //アニメーションのスピード　　milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}