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

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

使用方法
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'}
と書くことで表示方法が変わります。
詳細は動きのあるメニューを作成するjavascript「SlidingMenu」サンプルをご覧下さい。

2007年08月02日

前の記事：prototypeベースでグラフを作成するjavascript「Plotr」
次の記事：画像をクールに表示するjavascript「mooSlide」

関連記事

• [jQuery]Accordion
• [jQuery]Horizontal Accordion
• [jQuery]HoverAccordion
• [jQuery]FastFind Menu
• [jQuery]idTabs

• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」
• レイヤー表示（？）JavaScript「jParallax」
• スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」