Login With Twitter Style Using jQuery in ASP.Net

Introduction

Today, I have provided an article showing you how to create a login drop-down with a Twitter-style using jQuery. There are many ways in which a user can log in. A popular method since the birth of Twitter is to have a DropDown form. Today we provide a simple jQuery DropDown login form, it's easy to implement. All you must do is implement and hook it up to your website. First of all, start Visual Studio .NET and make a new ASP.NET web site using Visual Studio 2010.

Now you need to create a web site.

Go to Visual Studio 2010
New-> Select a website application
Click OK

Now add a new page to the website.

Go to the Solution Explorer
Right-click on the Project name
Select add a new item
Add a new web page and provide it a name
Click OK

Now add a CSS folder to the application that contains some style code. Put this code in the style.css file.

html,body{width:100%;height:100%;padding:0;background:#fff;margin:0;font-family:arial}
a { text-decoration:none }
.container { width:262px; margin:0 auto; padding-top:200px; }
#bar { width:100%; height:35px; padding:15px 0; background:url(../images/bar.png) repeat-x; }
#container { width:960px; margin:0 auto; }
#loginContainer {
position:relative;
float:right;
font-size:12px;
}
#loginButton {
display:inline-block;
float:right;
background:#d2e0ea url(../images/buttonbg.png) repeat-x;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;
position:relative;
z-index:30;
cursor:pointer;
}
#loginButton span {
color:#445058;
font-size:14px;
font-weight:bold;
text-shadow:1px 1px #fff;
padding:7px 29px 9px 10px;
background:url(../images/loginArrow.png) no-repeat 53px 7px;
display:block
}
#loginButton:hover {
background:url(../images/buttonbgHover.png) repeat-x;
}
#loginBox {
position:absolute;
top:34px;
right:0;
display:none;
z-index:29;
}
#loginButton.active {
border-radius:3px 3px 0 0;
}
#loginButton.active span {
background-position:53px -76px;
}
#loginButton.active em {
position:absolute;
width:100%;
height:1px;
background:#d2e0ea;
bottom:-1px;
}
#loginForm {
width:248px;
border:1px solid #899caa;
border-radius:3px 0 3px 3px;
-moz-border-radius:3px 0 3px 3px;
margin-top:-1px;
background:#d2e0ea;
padding:6px;
}
#loginForm fieldset {
margin:0 0 12px 0;
display:block;
border:0;
padding:0;
}
fieldset#body {
background:#fff;
border-radius:3px;
-moz-border-radius:3px;
padding:10px 13px;
margin:0;
}
#loginForm #checkbox {
width:auto;
margin:1px 9px 0 0;
float:left;
padding:0;
border:0;
*margin:-3px 9px 0 0; /* IE7 Fix */
}
#body label {
color:#3a454d;
margin:9px 0 0 0;
display:block;
float:left;
}
#loginForm #body fieldset label {
display:block;
float:none;
margin:0 0 6px 0;
}
#loginForm input {
width:92%;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;
color:#3a454d;
font-weight:bold;
padding:8px 8px;
box-shadow:inset 0px 1px 3px #bbb;
-webkit-box-shadow:inset 0px 1px 3px #bbb;
-moz-box-shadow:inset 0px 1px 3px #bbb;
font-size:12px;
}
/* Sign In Button */
#loginForm #login {
width:auto;
float:left;
background:#339cdf url(../images/loginbuttonbg.png) repeat-x;
color:#fff;
padding:7px 10px 8px 10px;
text-shadow:0px -1px #278db8;
border:1px solid #339cdf;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
margin:0 12px 0 0;
cursor:pointer;
*padding:7px 2px 8px 2px; /* IE7 Fix */
}
/* Forgot your password */
#loginForm span {
text-align:center;
display:block;
padding:7px 0 4px 0;
}
#loginForm span a {
color:#3a454d;
text-shadow:1px 1px #fff;
font-size:12px;
}
input:focus {
outline:none;
}

Now add a login.js file under the scripts folder in the application that contains some JavaScript code.

$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});

Now add the references for the CSS file and JavaScript files in the head section of the .aspx code.

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/login.js" type="text/javascript"></script>

The .aspx code will be as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TwitterLogin.aspx.cs" Inherits="TwitterLogin" %>
<!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">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/login.js" type="text/javascript"></script>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
</head>
<body>
<div id="bar">
<div id="container">
<div id="loginContainer">
<a href="#" id="loginButton"><span>Login</span><em></em></a>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span><a href="#">Forgot your password?</a></span>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Now run the application and test it.

Now click on the login image to show a login drop-down with Twitter style.

Note: You can see a demo of this article by downloading this application.

Some Helpful Resources

7 Comments

Join the conversation! Your thoughts help the community grow.

Sanwar Ranwa8y ago
Good one..........
Prashant Verma10y ago
Good one
Sharad11y ago
good one...
Vithal Wadje12y ago
super keep it up
nhan nguyen13y ago
what do i do for connect to my database? input & sumit != textbox & botton
ashish f14y ago
hi very nice article but how can i verify usernmae password ? where should i write that code in .cs file or in jquery file please guide
Former member14y ago
Hi....This is really nice article.