| 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】のようにフォームを表示させるというサンプルスクリプトだ。
【1】はじめの状態。タブだけ表示されている
【2】タブをクリックした状態。パネルが下にスライドされる
まずは、先のサイトから各種ファイルをダウンロードしよう。HTMLは【3】のように準備しておく。そうしたら、CSSとJavaScriptを組み込んで完成だ【4】。
【3】HTML。body要素の先頭に挿入しよう
【4】CSSとJavaScriptの組み込み。head要素に記述する
スクリプト内容を見ていこう【5】。【6】のul要素を見てみよう。あらかじめ「開く」と「閉じる」が準備されていて、一方がCSSで非表示にされている。jQueryの「toggle」というメソッドを使うと、表示・非表示を交互に行うことができるので、これを利用してどちらかを表示させている。
【5】JavaScriptの内容。それほど難しい内容ではない
【6】ボタン部分のHTML。「display: none」がポイントだ
あとは、それぞれをクリックしたときに「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を簡単につくりたい
