Users log in every day on the web, so imagine how many times login forms are being used in a single day. Usually, it doesn’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 CSS3 and a bit of jQuery.

An expanded dropdown login form, with email and password fields

View demo

The dropdown login form 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 login box: expanded or collapsed.

Comparing to the latest HTML5 & CSS3 login tutorial you’ve seen here, this one uses some jQuery code to animate the box when clicking on the login button.

Also, HTML5 new form features do not miss here.

The login box HTML

Here’s the markup we’ll use to create our CSS3 dropdown login form box:

Login 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>

The login box 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;
    border-radius: 3px;
  }

  nav li {
    float: left;
  }

  nav #login {
    border-right: 1px solid #ddd;
    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 {
    border-radius: 0 3px 3px 0;
  }

  nav #login-trigger {
    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: linear-gradient(top, #fff, #eee);
    padding: 15px;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
    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;
    border-radius: 3px;
    box-shadow: 0 1px 1px #ccc inset;
  }

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

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

  #login #submit {
    background-color: #d14545;
    background-image: linear-gradient(top, #e97171, #d14545);
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    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: linear-gradient(top, #d14545, #e97171);
  }

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

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

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

The login box jQuery code

The following code is quite self-explanatory. The if…else statement helps us indicate the current state for the login box. It basically toggle the span’s inner HTML between &#x25B2; and &#x25BC;.

  $(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;')
      })
  });

That’s it!

I hope you enjoyed this tutorial, thanks for reading!