skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

メニューツリーを作成するjavascript「Slidinglist」

｜ ｜ ｜ ｜ ｜ ｜ ｜

メニューをツリーで作成すると、サイトの構造が見えやすくなります。
Slidinglistでは地味になりがちなツリーメニューに動きを加えています。

使用方法
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/fx.utils2.js" type="text/javascript"></script>
<script src="http://yourdomain/slidinglist2.js" type="text/javascript"></script>
<style type="text/css">
.open {background: url('folder_open.png') no-repeat left top;}
.closed {background: url('folder_add.png') no-repeat left top;}
.current {color: red;}
li {background: url('folder.png') no-repeat left top;
padding-left: 20px;
display: block;
margin: 4px;
}
ul {
padding: 0;
list-style-type: none;
display: block;
}
</style>
以上を全てheadに加え、以下のスクリプトを書き込みます。
<script type="text/javascript">
window.onload=function(){
slideIt = new Slidinglist('menu', {
closedClass: 'closed',
openClass: 'open',
transition: Fx.Transitions.linear,
duration: 500,
state: 'closed'
}
);
}
</script>

最後にメニューを作成します。
親フォルダはulで子フォルダはliで括ります。
<ul id="menu">
<li> 親タイトル
<ul>
<li>子タイトル</li>
<li>子タイトル</li>
</ul>
</li>
メニューツリーを作成するjavascript「Slidinglist」サンプル

記事作成：2007年09月22日

前の記事：画像をカールさせるjavascript「curl.js」
次の記事：画像に影やリフレクションを付けるjavascript「efxFactory」