jQuery can really add some great touches to a website and one that is easy to do is a slide-down form.

<div id ="login_container"> 
<a href="#" onClick="openForm()">Login</a>
<div id="login_form">
<form action="" method="post" name="form1">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="pword" /><br />
<input type="submit"  /><br />
</form>
</div>

Obviously we want to initially hide the form and display it on the “Login” link:

#login_container
{
    position:absolute;
    top:100px;
    left:300px;
}
#login_form
{
    display:none;
    background:#FFFFFF;
}

There is a very important part lying in that CSS and that is the container needs to be absolutely positioned. Otherwise it will push all other block elements down when the form flies open.

Finally, we need the jQuery to make it all happen

function openForm()
{
	 if ($("#login_form").is(":hidden")){
              $("#login_form").slideDown("slow");
	}
	else{
		$("#login_form").slideUp("slow");
	}
}

Now you have a great UI component that gives a user access to the login form at anytime but doesn’t clog up the design.