Time for action – creating a slide-down login form

In this example we'll see how easy it is to implement a login form that slides open when a link is clicked. It's common practice to include a login link at the top of a page, but usually the whole login form isn't shown. Instead, clicking the link will reveal an inline form that is hidden by default. The following screenshot shows how the page will appear with the login form open:

Time for action – creating a slide-down login form
  1. To begin with, add the following code to the <body> of our template file:
    <header> <ul> <li>Already registered?</li> <li> <a id="login" href="login.html" title="Login">Login</a> <form> <fieldset> <legend>Login Form</legend> ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.