Tips 2 | ログインフォームをおしゃれに登場させたい | JavaScript |
>> | point 必要なとき以外は隠しておける | ||
>> | point クールなアニメーションで表示 |
会員向けのサイトなどの場合、ログインフォームはページ内で必要な要素ではあるものの、必要なときにだけ表示したほうがスマートだろう。そんな場合に便利なテクニックを紹介しよう。
「Web-kreation」というサイトの「Nice & Clean Sliding Login Panel build with jQuery」(web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/)は、【1】のようにタブのようなアイコンを表示させておき、クリックすると【2】のようにフォームを表示させるというサンプルスクリプトだ。
まずは、先のサイトから各種ファイルをダウンロードしよう。HTMLは【3】のように準備しておく。そうしたら、CSSとJavaScriptを組み込んで完成だ【4】。
スクリプト内容を見ていこう【5】。【6】のul要素を見てみよう。あらかじめ「開く」と「閉じる」が準備されていて、一方がCSSで非表示にされている。jQueryの「toggle」というメソッドを使うと、表示・非表示を交互に行うことができるので、これを利用してどちらかを表示させている。
あとは、それぞれをクリックしたときに「slideUp」、「slideDown」メソッドを使って、隠してあるパネルを表示・非表示するだけだ。ログインフォーム以外にもさまざまな場所で使えるだろう。
[INDEX]
>>> Tips1 ケータイのアクセスを振り分けしたい
>>> Tips2 ログインフォームをおしゃれに登場させたい
>>> Tips3 本格的なiPhoneサイトを簡単につくりたい
>>> Tips4 フォームを簡単に整列させたい
>>> Tips5 引用をかわいく演出したい
>>> Tips6 テキストエリアを小さくしておきたい
>>> Tips7 Internet Explorer 6用のCSSを簡単につくりたい
[INDEX]
>>> Tips1 ケータイのアクセスを振り分けしたい
>>> Tips2 ログインフォームをおしゃれに登場させたい
>>> Tips3 本格的なiPhoneサイトを簡単につくりたい
>>> Tips4 フォームを簡単に整列させたい
>>> Tips5 引用をかわいく演出したい
>>> Tips6 テキストエリアを小さくしておきたい
>>> Tips7 Internet Explorer 6用のCSSを簡単につくりたい