JavaScriptでプルアップメニューっぽくスライド表示

情報ブロックをスライドさせて表示｜web creators 2008 9月号

以前、このブログの「JavaScriptでプルダウンメニュー」という記事に「ロールオーバー時、サブメニューを下では無く上に出したい際はどうすれば良いですか？」というコメントが付き、「これっ！」という対策がなかったので、Flashで作ることをおすすめしましたが、web creators 2008 9月号の「表現の制約を乗り越えるWEBデザインの技」という特集に載っていたサンプルを使えば、なんとか作れそうなので紹介してみます。

「Andrew Sellick - Fancy Sliding Tab Menu V2」というページからライブラリがダウンロードできます。
デモ画面は以下のURLでも見るコトができます。
・www.andrewsellick.com/examples/tabslideV2/

プルアップメニューというよりは、ブロック要素をスライドして表示させる仕組みなので、「sexy sliding menu」に近いと思います。

兎にも角にも、サンプルです。

↑このデータはこちらからダウンロードできます。

基本的には、web creators 2008 9月号を読んでもらって理解して欲しいんですが、仕組み自体は難しくありません。ソースを見てもらえば理解できると思います。
ただし、多少の問題もあります。
スライドして表示されたブロックエリアがロールアウト後も10秒間表示されてしまいます。
tabslide.jsを編集するコトでロールアウト後の表示時間は短くできるんですが、そうするとバグを起こしてしまいした。…何か解決策があるのかも知れませんが。
あと、表示（動き）があまり滑らかでないコトも引っかかりますね。

以上の点から、あまりオススメはできないんですが、どうしてもFlashを使わずにプルアップメニューを組み込みたいという方には、解決策になり得るかも知れません。