最近、Webサイト上でよく見かける、タブをクリックすることで、
非表示となっているパネルをスライドして出現させる仕掛けがあります。
(「ほぼ日」とかでも使用されているやつ)

一度やってみたかったのでjQueryのライブラリを使用して、
サンプルを作ってみました。

◆「ログイン」をクリックしてみてください。

サンプルは、IDとパスワードを入力するエリアを、ページの上部に隠した状態にしてあり、
画面上にあるタブ(ログイン)をクリック後、入力エリアがスライドして現れるようにしています。

もちろん「ログイン」エリア以外の使用方法も可能で、
スライド後の表示させるエリアの大きさ他、カスタマイズもいろいろできます。

JSファイルを読んでしまえば後はCSSで好きなように形作ることが可能なので、
これから使えそうです。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

スライドしてパネルを表示

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR