Twitterのようなログインフォームを設置出来るjQueryプラグイン

クリックから展開

イメージ的には以下の様な。

中々美しいでしょ？

設置方法

はじめにjQueryをGoogle先生から呼び出し、CSS、login.jsを読み込みます。
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>

あとはピロピロとhtml以下の様な感じでフォームを書くだけ。
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<a href="#" id="loginButton"><span>Login</span><em></em></a>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span><a href="#">Forgot your password?</a></span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>


ダウンロードは以下から。
シンプルで効果的なjQueryのドロップダウンログインフォーム

ちなみにダウンロードボタン押すと、メール、RSSのライトボックスが表示されますが、別に何をしなさいということではありませんので、待ってればダウンロードが始まります。

それでは、また。