WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

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

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

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

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

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

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

スライドしてパネルを表示」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です