参照：Perfect signin dropdown box likes Twitter with jQuery
Twitterのドロップダウン形式のログインフォームをjQueryを使用して実装する方法が紹介されています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.pop.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.tipsy.js"></script>
<script type="text/javascript">
$(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
$('#forgot_username_link').tipsy({gravity: 'w'});
});
</script>
<!-- CSS -->
<style type="text/css">
#warp {
position:relative;
}
#topnav {
position:absolute;
top:0; right:0;
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin {
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:4px 6px 6px;
*padding:4px 12px 6px;
border-radius:4px;
background:#88bbd4;
*background:transparent url(/content/img/ajax/jquery/tipsy/signin-nav-bg-ie.png) no-repeat 0 0;
color:#fff;
font-weight:bold;
text-decoration:none;
}
#topnav a.signin:hover {
background:#59B;
*background:transparent url(/content/img/ajax/jquery/tipsy/signin-nav-bg-hover-ie.png) no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
*background-position:0 3px!important;
}
a.signin {
position:relative;
margin-left:3px;
}
a.signin span {
padding:4px 16px 6px 0;
background-image:url(/content/img/ajax/jquery/tipsy/toggle_down_light.png);
background-repeat:no-repeat;
background-position:100% 50%;
}
#topnav a.menu-open {
background:#ddeef6!important;
color:#666!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
width:170px;
margin:25px 0 0;
line-height:23px;
}
a.signin.menu-open span {
background-image:url(/content/img/ajax/jquery/tipsy/toggle_up_dark.png);
color:#789;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
z-index:100;
position:absolute;
top:24.5px;
right:0px;
width:210px;
margin-top:5px;
margin-right:0px;
*margin-right:-1px;
padding:12px;
border:1px transparent;
background-color:#ddeef6;
color:#789;
font-size:11px;
line-height:1;
text-align:left;
}
#signin_menu input[type=text], #signin_menu input[type=password] {
-moz-border-radius:4px;
-webkit-border-radius:4px;
display:block;
width:203px;
margin:0 0 5px;
padding:5px;
border:1px solid #ACE;
font-size:13px;
}
#signin_menu p {
margin:0;
}
#signin_menu a {
color:#6AC;
}
#signin_menu label {
font-weight:normal;
}
#signin_menu p.remember {
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
clear:both;
margin:5px 0;
}
#signin_menu p a {
color:#27B!important;
}
#signin_submit {
-moz-border-radius:4px;
-webkit-border-radius:4px;
margin:0 5px 0 0;
padding:4px 10px 5px;
border:1px solid #39D;
background:#39d url(/content/img/ajax/jquery/tipsy/bg-btn-blue.png) repeat-x scroll 0 0;
color:#fff;
font-size:11px;
font-weight:bold;
text-shadow:0 -1px 0 #39d;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
background-position:0 -5px;
cursor:pointer;
}
.tipsy {
padding:5px;
opacity:.8;
filter:alpha(opacity=80);
background-repeat:no-repeat;
font-size:10px;
}
.tipsy-inner {
padding:8px 8px;
max-width:200px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background-color:#000;
color:white;
font:11px 'Lucida Grande', sans-serif;
font-weight:bold;
line-height:1.5em;
text-align:left;
}
.tipsy-north {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-north.gif);
background-position:top center;
}
.tipsy-south {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-south.gif);
background-position:bottom center;
}
.tipsy-east {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-east.gif);
background-position:right center;
}
.tipsy-west {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-west.gif);
background-position:left center;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<!-- CODE -->
<div id="topnav" class="topnav">もうついったーに登録していますか？ <a href="login" class="signin"><span>ログイン</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin" action="#">
<p>
<label for="username">ユーザー名かメールアドレス</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text" />
</p>
<p>
<label for="password">パスワード</label>
<input id="password" name="password" value="" title="password" tabindex="5" type="password" />
</p>
<p class="remember">
<input id="signin_submit" value="ログイン" tabindex="6" type="submit" />
<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox" />
<label for="remember">次回から入力を省略</label>
</p>
<p class="forgot"><a href="#" id="resend_password_link">パスワードを忘れた？</a> </p>
<p class="forgot-username"> <A id="forgot_username_link" title="パスワードを覚えている場合は、メールアドレスでログインしてみてください" href="#">ユーザー名を忘れた？</A> </p>
</form>
</fieldset>
<!-- CODE / -->
<h1>設置サンプル</h1>
<p>参照：<a href='http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/'>Perfect signin dropdown box likes Twitter with jQuery</a></p>
<p>
Twitterのドロップダウン形式のログインフォームをjQueryを使用して実装する方法が紹介されています。
</p>
</div>
</body>
</html>
