jQuery 伸縮するサイドメニュー
今回紹介するプラグインは、メニューが伸縮し動きのあるメニューを実装してくれるjQuery プラグインです。
sliding_effect ダウンロード先、使い方
How To Create A 'Mootools Homepage' Inspired Navigation Effect Using jQueryの「Source」から一式ダウンロードしてくる事が出来ます。
head内
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/sliding_effect.js"></script>
XHTML
<h2>ナビゲーションタイトル</h2>
<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Link 1</a></li>
<li class="sliding-element"><a href="#">Link 2</a></li>
<li class="sliding-element"><a href="#">Link 3</a></li>
<li class="sliding-element"><a href="#">Link 4</a></li>
<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>
使いたい要素に #sliding-navigation と li.sliding-element と指定するだけで実装してくれます。
#sliding-navigation li要素って感じに指定したければ sliding_effect.js の 9行目を下記のように書き換えて下さい。
var list_elements = navigation_id + " li";
後は自分の好きなようにCSSで装飾して頂いたら問題ありません。
ちなみにCSSを何も設定していない時のサンプルものせておきます。
