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

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

使用方法
<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」サンプル

sponsors

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

記事作成:
記事URL:

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