Create Stylish Dropdown Log in / Sign up form using Jquery and CSS

In our last post, we create awesome drop-down menu navigation in Jquery and CSS , today we create log in and sign up form in drop down style.we follow same last tutorial pattern to create this form. We use Jquery and CSS to give styles. Later on you may use PHP or asp.net for working this module according to your requirement. We just create styling and design in Jquery and CSS in this tutorial. See Live Demo before continue reading, so you have better understand that what actually we are going to create.

Basic Structure of form in HTML

First of all we create basic structure of our form in HTML. We only create Log in form and give dummy link to sign up button. So that you can give the link of your registration form page later. Code of basic HTML form is given below :

<div>
<nav>
<ul>
<li id=”login”>
<a id=”login-trigger” href=”#”>Log in <span>?</span></a>
<div id=”login-content”>

<form id=”inputs” action=”#” method=”post”>
<input type=”text” id=”txtUserName” placeholder=”Your email address”/>
<input type=”password” id=”txtPwd” placeholder=”Password”/>

<input type=”submit” id=”btnLogin” Value=”Login” class=”submit” onclick=”btnLogin_Click”/></br> </form>

</br> <form action=”#” method=”post”>
<input type=”checkbox” name=”rememberme” value=”RememberMe”>Remember me</form>
<a href=”#” style=”float:right;”>Forgot password?</a>
</div>

</li>
<li id=”signup”>
<a href=”#”>Sign up</a>
</li>
</ul>
</nav>
</div>

Give Styling to form using CSS

After creating form in HTM, we apply some CSS to positioning and designing it. We already give ids to all elements in HTML and now we target that ids to apply CSS over them. CSS code is given below :

nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

nav li {
float: left;
}

nav #login {
border-right: 1px solid #ddd;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
background: #eee;
}

nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #444444;
background:#eeeeee;
}

nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
background: #eeeeee;
}

nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {

background:#E7A34C;
color:#ffffff;
}

nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E7A34C), to(#fff));
background-image: -webkit-linear-gradient(top, #E7A34C, #fff);
background-image: -moz-linear-gradient(top, #E7A34C, #fff);
background-image: -ms-linear-gradient(top, #E7A34C, #fff);
background-image: -o-linear-gradient(top, #E7A34C, #fff);
background-image: linear-gradient(top, #E7A34C, #fff);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}

nav li #login-content {
right: 0;
width: 280px;
}

#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}

#login #actions {
margin: 10px 0 0 0;
}

#login .submit {
background-color: #3F80EC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015), to(#f88e11));
background-image: -webkit-linear-gradient(top, #f06015, #f88e11);

background-image: -moz-linear-gradient(top, #f06015, #f88e11);
background-image: -ms-linear-gradient(top, #f06015, #f88e11);
background-image: -o-linear-gradient(top, #f06015, #f88e11);
background-image: linear-gradient(top, #f06015, #f88e11);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}

#login .submit:hover,
#login .submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background-image: -webkit-linear-gradient(top, #f88e11, #f06015);
background-image: -moz-linear-gradient(top, #f88e11, #f06015);
background-image: -ms-linear-gradient(top, #f88e11, #f06015);
background-image: -o-linear-gradient(top, #f88e11, #f06015);
background-image: linear-gradient(top, #f88e11, #f06015);
}

#login .submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#login .submit::-moz-focus-inner {
border: none;
}

#login label {
float: right;
line-height: 30px;
}

#login label input {
position: relative;
top: 2px;
right: 2px;
}

You may change colors and styling in above code as per your need. You may create external style sheet but I will place this code in <head> tag.

Add Jquery Code in form

Jquery code is given below :

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#login-trigger’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘&#x25B2;’)
else $(this).find(‘span’).html(‘&#x25BC;’)
})
});
</script>

That’s it, this Jquery will only work when internet connection is available because we linked Jquery library online so to run this script properly you must need an active internet connection.

Final and Complete Code of Log in / Sign up Form in Jquery and CSS

Final and complete code of form is given below :

<html>
<head>
<style>
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

nav li {
float: left;
}

nav #login {
border-right: 1px solid #ddd;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
background: #eee;
}

nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #444444;
background:#eeeeee;
}

nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
background: #eeeeee;
}

nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {

background:#E7A34C;
color:#ffffff;
}

nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E7A34C), to(#fff));
background-image: -webkit-linear-gradient(top, #E7A34C, #fff);
background-image: -moz-linear-gradient(top, #E7A34C, #fff);
background-image: -ms-linear-gradient(top, #E7A34C, #fff);
background-image: -o-linear-gradient(top, #E7A34C, #fff);
background-image: linear-gradient(top, #E7A34C, #fff);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}

nav li #login-content {
right: 0;
width: 280px;
}

#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}

#login #actions {
margin: 10px 0 0 0;
}

#login .submit {
background-color: #3F80EC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015), to(#f88e11));
background-image: -webkit-linear-gradient(top, #f06015, #f88e11);

background-image: -moz-linear-gradient(top, #f06015, #f88e11);
background-image: -ms-linear-gradient(top, #f06015, #f88e11);
background-image: -o-linear-gradient(top, #f06015, #f88e11);
background-image: linear-gradient(top, #f06015, #f88e11);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}

#login .submit:hover,
#login .submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background-image: -webkit-linear-gradient(top, #f88e11, #f06015);
background-image: -moz-linear-gradient(top, #f88e11, #f06015);
background-image: -ms-linear-gradient(top, #f88e11, #f06015);
background-image: -o-linear-gradient(top, #f88e11, #f06015);
background-image: linear-gradient(top, #f88e11, #f06015);
}

#login .submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#login .submit::-moz-focus-inner {
border: none;
}

#login label {
float: right;
line-height: 30px;
}

#login label input {
position: relative;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#login-trigger’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘&#x25B2;’)
else $(this).find(‘span’).html(‘&#x25BC;’)
})
});
</script>
<div>
<nav>
<ul>
<li id=”login”>
<a id=”login-trigger” href=”#”>
Log in <span>?</span>
</a>
<div id=”login-content”>

<form id=”inputs” action=”#” method=”post”>
<input type=”text” id=”txtUserName” placeholder=”Your email address”/>
<input type=”password” id=”txtPwd” placeholder=”Password”/>

<input type=”submit” id=”btnLogin” Value=”Login” class=”submit” onclick=”btnLogin_Click”/></br> </form>

</br> <form action=”#” method=”post”>
<input type=”checkbox” name=”rememberme” value=”RememberMe”>Remember me</form>
<a href=”#” style=”float:right;”>Forgot password?</a>
</div>

</li>
<li id=”signup”>
<a href=”#”>Sign up</a>
</li>
</ul>
</nav>
</div>
</body>
</html>

Create new file and Copy / Paste above code in the file and save it with extension .html. Now run that file in your browser to test the working of this script.

Need Help ?

I try my best to write simple codes so that you can understand it easily but if you need my help regarding this tutorial you are more than welcome. Just write your query in comments section below and I will try to solve your all type of queries. Also share it with your friends and share on your social profiles so for me, it will be a great favor from your side. Keep in touch with us for more amazing posts