效果體驗：http://hovertree.com/texiao/jquery/15.htm
Demo1：http://hovertree.com/hvtart/bjae/jftxwtko.htm
Demo 2：http://hovertree.com/hvtart/bjae/vgte3y3a.htm
代碼如下：
<!DOCTYPE HTML >
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><base target="_blank" />
<title>點擊登錄按鈕彈出登錄層(HTML+CSS+JS)_何問起 http://hovertree.com</title>
<meta name="keywords" content="HTML+CSS模板,HTML+CSS教程,HTML+CSS導航菜單,FLASH焦點圖,網頁特效" />
<meta name="description" content="何問起為您提供-HTML+CSS模板，HTML+CSS教程，JS廣告代碼，HTML+CSS導航菜單，FLASH焦點圖片，國外網頁設計欣賞與模板和CSS技巧。" />
<link href="http://hovertree.com/texiao/jquery/15/front.css" media="screen, projection" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topnav" class="topnav">點擊右邊的按鈕試試? <a href="login" class="signin"><span>登錄</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin" action="http://tool.hovertree.com/info/ip/">
<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>
</form>
</fieldset>
</div>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(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();
}
});
});
</script>
<script src="http://hovertree.com/texiao/jquery/15/jquery.tipsy.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function() {
$('#forgot_username_link').tipsy({gravity: 'w'});
});
</script>
<!--下面只是說明與程序代碼無關-->
<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<a href="http://hovertree.com/hvtart/bjae/vgte3y3a.htm">原文</a>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/jquery/">jQuery</a> <a href="http://hovertree.com/hvtart/bjae/jftxwtko.htm">Demo 1</a> <a href="http://hovertree.com/hvtart/bjae/vgte3y3a.htm">Demo 2</a><br />
<span>本代碼由<a href="http://hovertree.com" style="color:#F00;">何問起網 收集整理</a> </span><br>
<a href="http://hovertree.com">何問起 http://hovertree.com</a><br /><br />
<span>我們為您提供-HTML+CSS模板，HTML+CSS教程，JS廣告代碼，HTML+CSS導航菜單，國外網頁設計欣賞與模板和CSS技巧。</span><br />
<span>何問起只收錄實用和能提高用戶體驗的代碼</span><br />
<span>我們只想解放出你的部分寫代碼時間來思考更高層次的設計。</span>
</div>
</body>
</html>