実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Bullet List Accordion Menu | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable", /* Shared CSS class name of headers group that are expandable */
contentclass: "categoryitems", /* Shared CSS class name of contents group */
revealtype: "click", /* Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" */
mouseoverdelay: 200, /* if revealtype="mouseover", set delay in milliseconds before header expands onMouseover */
collapseprev: true, /* Collapse previous content (so only one open at any time)? true/false */
defaultexpanded: [0], /* index of content(s) open by default [index1, index2, etc]. [] denotes no content */
onemustopen: false, /* Specify whether at least one header should be open always (so never all headers closed) */
animatedefault: false, /* Should contents open by default be animated into view? */
persiststate: true, /* persist state of opened contents within browser session? */
toggleclass: ["", "openheader"], /* Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] */
togglehtml: ["prefix", "", ""], /* Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) */
animatespeed: "fast", /* speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" */
oninit:function(headers, expandedindices){ /* custom code to run when headers have initalized */
/* 何らかの処理 */
},
onopenclose:function(header, index, state, isuseractivated){ /* custom code to run whenever a header is opened or closed */
/* 何らかの処理 */
}
});
</script>
<!-- CSS -->
<style type="text/css">
.arrowlistmenu { width:180px; margin:20px 0; }
.arrowlistmenu .menuheader { color:#fff; background:black url(/content/img/ajax/ddaccordion/titlebar.png) repeat-x center left; margin:0 0 10px 0; padding:4px 0 4px 10px; text-transform:uppercase; cursor:hand,pointer; }
.arrowlistmenu .openheader { background-image:url(/content/img/ajax/ddaccordion/titlebar-active.png); }
.arrowlistmenu ul { list-style-type:none; margin:0 0 8px 0; padding:0; }
.arrowlistmenu ul li { padding-bottom:2px; }
.arrowlistmenu ul li a { color:#a70303; background:url(/content/img/ajax/ddaccordion/arrowbullet.png) no-repeat center left; display:block; padding:2px 0 2px 19px; border-bottom:1px solid #dadada; text-decoration:none; font-weight:bold; font-size:90%; }
.arrowlistmenu ul li a:visited { color:#a70303; }
.arrowlistmenu ul li a:hover { color:#a70303; background-color:#f3f3f3; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html'>Bullet List Accordion Menu</a> | 設置サンプル</h1>
<!-- CODE -->
<ul>
<li><a href="example3.php?expandable=0&f=include/ajax/jquery_plugin_navigationmenu/ddaccordion.inc">URLパラメータで1番目のメニューを展開</a></li>
<li><a href="example3.php?expandable=1&f=include/ajax/jquery_plugin_navigationmenu/ddaccordion.inc">URLパラメータで2番目のメニューを展開</a></li>
<li><a href="example3.php?expandable=2&f=include/ajax/jquery_plugin_navigationmenu/ddaccordion.inc">URLパラメータで3番目のメニューを展開</a></li>
</ul>
<div class="arrowlistmenu">
<h3 class="menuheader expandable">MENU 1</h3>
<ul class="categoryitems">
<li><a href="#">Link 1-1</a></li>
<li><a href="#">Link 1-2</a></li>
<li><a href="#">Link 1-3</a></li>
<li><a href="#">Link 1-4</a></li>
<li><a href="#">Link 1-5</a></li>
<li><a href="#">Link 1-6</a></li>
<li><a href="#">Link 1-7</a></li>
<li><a href="#">Link 1-8</a></li>
</ul>
<h3 class="menuheader expandable">MENU 2</h3>
<ul class="categoryitems">
<li><a href="#">Link 2-1</a></li>
<li><a href="#">Link 2-2</a></li>
<li><a href="#">Link 2-3</a></li>
<li><a href="#">Link 2-4</a></li>
<li><a href="#">Link 2-5</a></li>
</ul>
<h3 class="menuheader expandable">MENU 3</h3>
<ul class="categoryitems">
<li><a href="#">Link 3-1</a></li>
<li><a href="#">Link 3-2</a></li>
<li><a href="#">Link 3-3</a></li>
<li><a href="#">Link 3-4</a></li>
<li><a href="#">Link 3-5</a></li>
</ul>
<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>
</div><!-- .arrowlistmenu -->
<!-- CODE / -->
</div>
</body>
</html>