« ブラウザに合わせて背景画像が拡大縮小 | トップページ | JavaScriptで文字サイズを変更 »

2007.10.03

スライドインしてくるメニュー

Sexy sliding JavaScript side bar menu|prototype.js

今月号のWeb Designingに載っていたAjaxライブラリ、Sexy sliding JavaScript side bar menu(長ッ!)を紹介してみます。
画面右端にタブが表示されていて、クリックするとメニューエリアがスライドして表示されます。ここまででもカッコイイのですが、例えば、Lightboxのようなライブラリと組み合わせる事で、もう1つ凝った演出も可能になるというのだから、使わない手はないと思います。
(僕の場合、Lightboxまで使うと演出過多のような気がしたので、シンプルなサンプルにしましたが…)

サンプルはこんな感じです。

↑このサンプルはこちらからダウンロードできます。

おなじみの「prototype.js」「script.aculo.us」の「effects.js」を読み込む必要があります。また、紙面上では「lightbox.js」と組み合わせたサンプルも載っていますので、参考にしてみてください。
僕の方では、タブを左側に持ってきたり、縦に重ねたりとカスタマイズできないか試行錯誤中です。

サンプルデータはWeb Desingningのサイトからもダウンロードできますが、IDとパスワードが必要です。

|

« ブラウザに合わせて背景画像が拡大縮小 | トップページ | JavaScriptで文字サイズを変更 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/16648973

この記事へのトラックバック一覧です: スライドインしてくるメニュー:

« ブラウザに合わせて背景画像が拡大縮小 | トップページ | JavaScriptで文字サイズを変更 »