CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

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を何も設定していない時のサンプルものせておきます。