tutorial #4: sliding login form

Login forms are essential on any webpage, jQuery can enhance these forms. Here, we use a login form with an easing effect as a demonstration

For this demonstration, you will learn how create a sliding login form. You will learn how to build the jQuery code needed and learn the purpose of each line. Also, you will learn how to create the elements needed to make a sliding login form in HTML and CSS.

Below is a demonstration of a sliding login form. Click on “Login” and the form will expand, click on “Login” again to toggle it back.

The How-To

HTML

                 
<div id="login">
        
<a href="#">login</a>

<form action="#">
<div>
<label for="username">USERNAME:</label>
<input name="username" id="username" type="text"/>
</div>

<div>
<label for="password">PASSWORD:</label>
<input name="password" id="password" type="password"/>
</div>

<div>
<button type="submit">Login</button>
</div>
</form>

</div>

CSS


#login {
 	background:#155a7a;
	border-radius: 12px;
    padding: 10px;
    width: 170px;
}

#login a {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
	text-transform:capitalize;
    padding: 5px;
}

#login a:hover {
	color:#52A5DB;
}

#login a.active {
  background-position: right 0;
}

#login form {
  margin-top: 20px;
}

#login form label {
  color: #ffffff;
  display: block;
  font-family: Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
  margin-bottom: 5px;
}

#login form input {
    border-radius: 8px;
    color: #363636;
    display: block;
    font-family: Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-bottom: 20px;
	padding: 3px;
}

#login form button {
	border-radius: 8px;
}

jQuery

$(document).ready(function(){//The document is ready
$('#login form').hide();
//Hides the form inside the div with the "login" attribute.
  $('#login a').toggle(function() {//Creates a toggle. 
    $(this)
      .addClass('active')//Will add a class named "active".
      .next('form')//moves to the form
      .animate({'height':'show'}, {//Dictates the height.
        duration: 'slow',//The speed of the animation.
        easing: 'easeOutElastic'//Sets the easing effect at'easeOutElastic'
      });
  }, function() {
    $(this)
      .removeClass('active')
      .next('form')//Goes to the next form.
      .slideUp();//slides it up
  });
  $('#login form :submit').click(function() {//The button.
    $(this)
      .parent()//Takes the form
      .prev('a')
      .click();//Active
  });
});//Close.