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

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

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

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

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

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

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