slideToggle() でスライドアニメーション
JQueryを使ったスライドするログインバーを紹介します。
スクリプト部分は非常に単純で、JQueryを読み込んだ後、任意のボタンにJQueryのメソッドslideToggle()を実行するだけです。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// ログイン用
$(function(){
$('a#link-login').click(function(){$('div#client-login').slideToggle(); return false;});
$('button#btn-login').click(function(){alert("ok");$('div#client-login').slideToggle(); return true;});
$('div#client-login').css('display', 'none');
});
</script>
<div id="client-login">
<form action="" method="post" target="_blank">
<label for="username">ユーザ名:</label><input id="username" name="username" type="text" class="txtbox" />
<label for="password">パスワード:</label><input id="password" name="password" type="password" class="txtbox" />
<button id="btn-login">ログイン</button>
</form>
</div>
<div class="topnavi">
<a href="#" id="link-login">ログイン</a>
</div>
