Login desplegable con jQuery

Resulta bastante sencillo hacer un menú desplegable con jQuery que además de funcional sea bonito. En este caso vamos a ver un menú que se despliega hacia abajo cuando pulsamos sobre «Login».

Lo primero es crear un div con el contenido. Tendremos un link con «Login» y una flechita hacia abajo. Al pulsar sobre login se abrirá el div loginpanel mostrando los campos para el usuario y contraseña, además del botón de Entrar. El HTML es el siguiente:

[sourcecode language=html]


Login


[/sourcecode]

Para poder utilizar jQuery importamos la librería javascript desde googleapis.

[sourcecode language=html]

Login desplegable jQuery

[/sourcecode]

Por último tenemos el código que controlará cuándo se abre la capa del login, se cambia la flecha y/o se cierra la capa al volver a pulsar sobre el login.

[sourcecode language=html]

[/sourcecode]

Cuando se pulsa sobre el div con id «showlogin», se muestra la capa de login cuyo identificador es «loginpanel» con un efecto deslizante (slide). Si la capa ya estuviera abierta, haría lo contrario (se cerraría), por eso se utiliza toggle.
Además, como bonus, se cambia la flecha para indicar que se puede desplegar o plegar el login.

Os podéis descargar el contenido del menú desplegable y utilizarlo donde queráis. Se han añadido unos estilos css para que sea un poco más amigable.