Web users log in every day, so imagine how many times log in forms are being used in a single day. Usually, it don’t take too much to fill a form like this, but using a dropdown solution will speed up things for you.

In this article, you will see how to create a good looking dropdown login form using HTML5, CSS3 and a bit of jQuery.

drop-down-login

The concept

The main purpose is to avoid waiting to load a separate page in order to log in. This way you can increase user experience, as the user has the possibility to log in immediately.

Ingredients

Remember the CSS3 buttons we’ve created using HTML entities as icons? In this article we’ll use entities again to show an arrow that indicates the current state for our dropdown log in box: expanded/collapsed.

HTML

Here’s the markup we’ll use to create our CSS3 dropdown log in:

drop-down-login-html-markup

<nav>
        <ul>
                <li id="login">
                        <a id="login-trigger" href="#">
                                Log in <span>▼</span>
                        </a>
                        <div id="login-content">
                                <form>
                                        <fieldset id="inputs">
                                                <input id="username" type="email" name="Email" placeholder="Your email address" required>
                                                <input id="password" type="password" name="Password" placeholder="Password" required>
                                        </fieldset>
                                        <fieldset id="actions">
                                                <input type="submit" id="submit" value="Log in">
                                                <label><input type="checkbox" checked="checked"> Keep me signed in</label>
                                        </fieldset>
                                </form>
                        </div>
                </li>
                <li id="signup">
                        <a href="">Sign up FREE</a>
                </li>
        </ul>
</nav>

CSS

There are quite a lot of CSS lines, but I think is worth it:

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;
}

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: #444;
  text-shadow: 0 1px 0 #fff;
}

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

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: #fff;
}

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);
  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: 250px;
}

/*--------------------*/

#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: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -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(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
}       

#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;
}

jQuery

The following code is quite self-explanatory. The if… else statement helps us indicate the current state for the log in box. It basically toggle the span‘s inner HTML between ▼ and ▲.

$(document).ready(function(){
        $('#login-trigger').click(function(){
                $(this).next('#login-content').slideToggle();
                $(this).toggleClass('active');                                  

                if ($(this).hasClass('active')) $(this).find('span').html('▲')
                        else $(this).find('span').html('▼')
                })
});

view demo

That’s it!

I hope you enjoyed this tutorial, don’t forget to leave a comment. Thanks for reading!

Posted by: Dhiraj kumar

About these ads
Comments
  1. I’m really impressed along with your writing talents as neatly as with the format in your blog. Is that this a paid subject or did you modify it yourself? Anyway stay up the excellent quality writing, it is rare to see a great weblog like this one these days..

  2. Utilidades says:

    I got this web site from my pal who shared with
    me about this web page and at the moment this time I am visiting this site and reading very informative
    content at this place.

  3. Aish says:

    Plz tell me how I can download this sign in dropbox because copy paste not working properly so I want to download this login dropbox . please tell me where is your download link thank you

  4. Antra says:

    I was very happy to uncover this site. I want to
    to thank you for your time for this particularly fantastic read!!
    I definitely savored every bit of it and
    i also have you saved to fav to see new information
    in your web site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s