スクロールアコーディオンメニュー(Cookie付き)
3 / 25 / 2008
アニメーション付きのアコーディオンメニューはprototype.jsを使った物なんかが有名だけれども、それにCookieで開閉状況を記憶させておくものがなかなか見つからなかった。Cookieは使えてもアニメーションが使えなかったり、併用出来そうでもCSSのIDとClassが指定されていてそれ以外使えなかったり。が、発見。
http://sawa-s.com/scroll-accordion-menu.html
上記ページのダウンロードをクリック。設置方法も書いてありますが、付け加えてもう少し詳しく書いて行きます。
まず、ダウンロードしたファイルの中の「ddaccordion.js」「wrapscroll.js」「jquery.js」 「style.css」を自分のサイトの適当な場所にコピー。headに以下を記述します。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="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" src="wrapscroll.js"></script>
コメントアウトになってる部分は消しちゃダメらしいです。そしてddaccordionメソッドの作成、wrapScrollオブジェクトの作成（動かす時のセッティングの内容みたいなもんです）をします。
<script type="text/javascript"><!--
ddaccordion.init({
headerclass: "expandable",
contentclass: "categoryitems",
collapseprev: true,
defaultexpanded: [0],
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
animatespeed: "normal"
})
// wrapScroll
var mov = new wrapScroll('accordion_menu','container','header');
mov.marginTop = 5; //上からのマージンを指定(px)
//--></script>
これはHTMLに書く必要はないので（ブログだったらテンプレートに書けば済みますが、普通の静的なサイトだったら面倒ですし、長い）例えば「settings.js」というファイルを作って、上記内容をコピペして、head内にリンクするのが良いと思います。その場合は
ddaccordion.init({
headerclass: “expandable”,
contentclass: “categoryitems”,
collapseprev: true,
defaultexpanded: [0],
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
animatespeed: “normal”
})
// wrapScroll
var mov = new wrapScroll(‘accordion_menu’,'container’,'header’);
mov.marginTop = 5; //上からのマージンを指定(px)
になります。それぞれの設定の内容はダウンロードしたサイトを参照して下さい。そしてHTMLに
<div id="accordion_menu">
<a href="http://sawa-s.com/"><div class="menuheader">HOME</div></a>
<div class="menuheader expandable">カテゴリー 1</div>
<div class="categoryitems">
<ul>
<li><a href="#">MENU 1-1</a></li>
<li><a href="#">MENU 1-2</a></li>
<li><a href="#">MENU 1-3</a></li>
<li><a href="#">MENU 1-4</a></li>
<li><a href="#">MENU 1-5</a></li>
<li><a href="#">MENU 1-6</a></li>
</ul>
</div>
・
・
・
のように記述します。べつに<li>を使わなくて<dl>とかでも大丈夫っす。それで「style.css」を適当に編集します。IDやClassを変える場合は必須。
メニューがスクロールについてくるのはいらないので、僕は使わないようにしました。「wrapScroll.js」のリンクをheadから削除して、「settings.js」の // wrapScroll以下を消せばokす。ちなみに wrapScroll.jsは法人利用などの場合はライセンスを取得する必要があるそうです。
追記
jquery.js はprototype.jsと共存出来ません。なのでlightboxなどを使っている人は動かなくなります。解決策を書いていますので、jQuery lightBox plugin – jQueryでLightBoxが使えるjavascriptを参照して下さい。