In this article you will find a simple and clean code of a jQuery dropdown login button which on click expand a dropdown form and a link inside it. We can customize the code as per our need, we can change the color of the button, expanded form, it's size in terms of height and width.
the code is well explained here, the CSS part and the HTML part is defined separately. One can also download the code at bottom of the article.
JS code to be copy and paste in the header part in <script> tag
$(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();
}
});
});
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();
}
});
});
$(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();
}
});
});
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();
}
});
});
CSS code to be copy and paste in the header part inside <styles> of the HTML page
html, body
{
width:100%;
height:100%;
padding:0;
background:#fff;
margin:0;
font-family:arial
}
a
{
text-decoration:none
}
#loginOuter
{
position:relative;
float:right;
font-size:12px;
}
#loginButton
{
display:inline-block;
float:right;
background:#efeded;
border:1px solid #9f9f9f;
-moz-border-radius:3px;
position:relative;
z-index:30;
cursor:pointer;
margin:10px;
}
#loginButton span
{
color:#333333;
font-size:14px;
font-weight:bold;
padding:7px 29px 9px 10px;
background:url(../images/loginArrow.png) no-repeat 53px 7px;
display:block
}
#loginBox
{
position:absolute;
top:45px;
right:10px;
display:none;
z-index:29;
}
#loginButton.active span
{
background-position:53px -76px;
}
#loginForm
{
width:248px;
border:1px solid #9f9f9f;
-moz-border-radius:3px 0 3px 3px;
margin-top:-1px;
background:#efeded;
padding:12px;
}
#loginForm span a
{
color:#333333;
font-size:12px;
}
{
width:100%;
height:100%;
padding:0;
background:#fff;
margin:0;
font-family:arial
}
a
{
text-decoration:none
}
#loginOuter
{
position:relative;
float:right;
font-size:12px;
}
#loginButton
{
display:inline-block;
float:right;
background:#efeded;
border:1px solid #9f9f9f;
-moz-border-radius:3px;
position:relative;
z-index:30;
cursor:pointer;
margin:10px;
}
#loginButton span
{
color:#333333;
font-size:14px;
font-weight:bold;
padding:7px 29px 9px 10px;
background:url(../images/loginArrow.png) no-repeat 53px 7px;
display:block
}
#loginBox
{
position:absolute;
top:45px;
right:10px;
display:none;
z-index:29;
}
#loginButton.active span
{
background-position:53px -76px;
}
#loginForm
{
width:248px;
border:1px solid #9f9f9f;
-moz-border-radius:3px 0 3px 3px;
margin-top:-1px;
background:#efeded;
padding:12px;
}
#loginForm span a
{
color:#333333;
font-size:12px;
}
<div id="loginOuter" style="margin:auto">
<a href="#" id="loginButton"><span>Login</span></a>
<div id="loginBox">
<form id="loginForm">
<span><a href="#">Update your Profile</a></span>
</form>
</div>
</div>
<a href="#" id="loginButton"><span>Login</span></a>
<div id="loginBox">
<form id="loginForm">
<span><a href="#">Update your Profile</a></span>
</form>
</div>
</div>
I hope you like the article, Thanks.