参照: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>