Escolar Documentos
Profissional Documentos
Cultura Documentos
HTML Code
At first, begin with the HTML code. HTML is very simple and contains a link button <a>
tag, comes together with <fieldset> tag to display the form.
<div id="container">
<div id="topnav" class="topnav"> Have an account? <a href="login"
class="signin"><span>Sign in</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin"
action="https://twitter.com/sessions">
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username"
tabindex="4" type="text">
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" value="" title="password"
tabindex="5" type="password">
</p>
<p class="remember">
<input id="signin_submit" value="Sign in" tabindex="6"
type="submit">
<input id="remember" name="remember_me" value="1" tabindex="7"
type="checkbox">
<label for="remember">Remember me</label>
</p>
<p class="forgot"> <a href="#" id="resend_password_link">Forgot
your password?</a> </p>
<p class="forgot-username"> <A id=forgot_username_link
title="If you remember your password, try logging in with your email"
href="#">Forgot your username?</A> </p>
</form>
</fieldset>
</div>
CSS Code
You need to use css to define the Sign In button and and the Login Form. The following
codes code below is used to do that.
Copy and paste the following code to your css file or add it into your HTML page where
you define the styles, these codes below define the Sign In button.
#container {
width:780px;
margin:0 auto;
position: relative;
}
#content {
width:520px;
min-height:500px;
}
a:link, a:visited {
color:#27b;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a img {
border-width:0;
}
#topnav {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat
0 0;
*padding:4px 12px 6px;
}
#topnav a.signin:hover {
background:#59B;
*background:transparent url("images/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 {
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open {
background:#ddeef6!important;
color:#666!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
width:170px;
}
a.signin.menu-open span {
background-image:url("images/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;
background-color:#ddeef6;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align:left;
padding:12px;
top: 24.5px;
right: 0px;
margin-top:5px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
}
Surprisedly, the HTML and CSS codes seem to be complicated, but the Javascript is so
simple. Simply copy and paste these Javascript code below to show/hide when users click
on the Sign In button, even when click outside the Login Form.
$(".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>
As the codes above, when users click on the Sign In button, it’ll call a new function. At
first, the Login Form (under the <filedset> tag) will be showed, then the link with class
name “.signin” will be added one more class name “menu-open” to change the
background image.