« 外部ファイルで内容を管理するFlashメニュー | トップページ | JavaScriptでクロスフェード »

2009.01.30

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を使わずにプルアップメニューを組み込みたいという方には、解決策になり得るかも知れません。

|

« 外部ファイルで内容を管理するFlashメニュー | トップページ | JavaScriptでクロスフェード »

コメント

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: JavaScriptでプルアップメニューっぽくスライド表示:

» JavaScriptでプルダウンメニュー [Good Sleep]
ドロップダウンメニュー|DropDownMenu.js プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript Ajax 実践サンプル集さんのドロッ [続きを読む]

受信: 2009.01.30 18:59

« 外部ファイルで内容を管理するFlashメニュー | トップページ | JavaScriptでクロスフェード »