メニュー項目がたくさんある時、それをアコーディオン化してすっきりさせたい時がある。
これをどうやって実現するか、いろいろ調べるとjQueryを使うのが一般的なようです。そこでいろいろ探して見つけたのがhttp://www.dynamicdrive.comというサイト。
この中にあるアコーディオンメニューを実際に実装してみた。実装したのはWordPressでサイドバーに組み込んでみました。
いきなりソースを表示するとこんな感じ。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script type=”text/javascript” src=”http://hoge.hogera.com/lib/ddaccordion.js”>
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type=”text/javascript”>
ddaccordion.init({
headerclass: “submenuheader”, //Shared CSS class name of headers group
contentclass: “submenu”, //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: 0, //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: [], //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: ["", ""], //Two CSS classes to be applied to the header when it’s collapsed and expanded, respectively ["class1", "class2"]
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
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type=”text/css”>
.glossymenu{
margin: 0px 0;
padding: 0;
width: 147px; /*width of menu*/
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: url(”http://hoge.hogera.com/img/sbutton/sbutton_hoge.png”); repeat-x bottom left;
font: bold 14px “Lucida Grande”, “Trebuchet MS”, Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the “.statusicon” icon image*/
width: 147px;
padding: 10px;
margin-left:-20px;
text-decoration: none;
border-bottom: 2px solid #ffffff;
text-align:center;
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
}
.glossymenu a.menuitem:hover{
background-image: url(”http://hoge.hogera.com/img/sbutton/sbutton_hoge.png”);
color: black;
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: #4444ff;
margin:-5px 0px -6px 0px;
padding:5px 10px 0px 0px;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid white;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 14px “Lucida Grande”, “Trebuchet MS”, Verdana, Helvetica, sans-serif;
color: white;
text-decoration: none;
}
.glossymenu div.submenu ul li a:hover{
background: #4444ff;
color: black;
}
</style>
</head>
<body>
<div class=”glossymenu”>
<a class=”menuitem submenuheader” href=”http://www.dynamicdrive.com/”>Menu1</a>
<div class=”submenu”>
<ul>
<li><a href=”http://hoge.hogera.com/title1.html”>title1</a></li>
<li><a href=”http://hoge.hogera.com/title2.html”>title2</a></li>
<li><a href=”http://hoge.hogera.com/title3.html”>title3</a></li>
</ul>
</div>
<a class=”menuitem submenuheader” href=”http://www.dynamicdrive.com/”>Menu2</a>
<div class=”submenu”>
<ul>
<li><a href=”http://hoge.hogera.com/title4.html”>title4</a></li>
<li><a href=”http://hoge.hogera.com/title5.html”>title5</a></li>
<li><a href=”http://hoge.hogera.com/title6.html”>title6</a></li>
</ul>
</div>
</div>
</body>
</html>
サイトにあるソースをちょっと改良しました。
基本的には３つのJacaScriptを使っています。
jquery.min.js(呼び出し)
ddaccordion.js(呼び出し)
ソースないのjavaScript
CSSの部分は自由にカスタマイズ可能です。
単に動かすのには時間がかかりませんが、自分の思い通りの動きとデザインにするのには少し時間がかかります。
CSSの知識やこのプログラムの使い方に習熟すれば３０分位で十分できるかもしれませんが。
参考サイト
http://blog.wyvern.cx/luftchen/archives/64
http://factory.yusukenakanishi.com/javascript/jquery/accordion/
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm?submenuheader=0
