動きのあるメニューを作成するjavascript「SlidingMenu」

ホームページを作る際メニューは重要な要素の一つになります。
わかりやすくかつ訪問者の興味を引きつけることが必要になります。
get Into ThisではSlidingMenu用javascriptであるrb_menu.jsを公開し、動きのあるメニューを可能にしています。

sponsors

使用方法

SlidingMenuからrb_menu.jsをダウンロードします。
またjQueryというライブラリとInterface elements for jQueryをそれぞれダウンロードします。
これらを「jquery.js」「interface.js」「rb_menu.js」をheadに埋め込みます。
またCSSは基本的にはメニュー要素の高さやline-heightを指定し、floatさせれば大丈夫です(サンプルは下記コードサンプルをご覧下さい)。
さらにメニュー要素全体をid要素で囲みscriptを以下の様に書きます。
<script>
$('メニュー全体を囲んだid名').メニュー自体を囲んだdivclass名();
</script>
またオプションとして()内に
{triggerEvent: 'click', hideOnLoad: false, autoHide: false}
{transition: 'easein'}
と書くことで表示方法が変わります(下記サンプル参照)。

サンプル

デフォルト:
クリック:
'easein'アニメーション:

sponsors

Javascriptサンプルページ一覧
skuare.net

コードサンプル(デフォルト)

HTML
<div id="menu1" class="menu">
<div class="rb_toggle"><span>menu »</span></div>
<div class="rb_menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Facts</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Press</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Contacts</a></li>
<li>< href="">Log in</a></li>
</ul>
</div>
</div>
javascript
$('#menu1').rb_menu();
CSS
.menu {
font-family: arial, verdana, sans-serif;
position: relative;
}
.rb_toggle {
height: 25px;
line-height: 25px;
padding: 0 5px 0 0;
}
.rb_toggle span {
color: #999;
font-size: 11px;
font-weight: bold;
font-family: arial, verdana, sans-serif;
cursor: hand;
cursor: pointer;
}
.rb_toggle span.hover {
color: red;
}
.rb_menu {
position: absolute;
left: 50px;
top: 0;
}
.rb_menu ul,
.rb_menu li {
list-style-type: none;
padding: 0;
margin: 0;
}
.rb_menu li {
float: left;
height: 25px;
line-height: 25px;
padding: 0 10px 0 0;
}
.rb_menu a {
font-size: 16px;
font-weight: regular;
color: #f90;
text-decoration: none;
}
.rb_menu a:hover {
text-decoration: underline;
}
.rb_menu a.current {
color: #999;
}