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.

5 opiniones en “Login desplegable con jQuery”

  1. Hola buenas, una consulta mira pude hacer funcionar el «login» que has publicado, pero el estilo que me aparece es distinto, como puedo ir cambiando el estilo hasta encontrar el que deseo?

    Espero tu respuesta, Gracias

  2. Hola, ¿como puedo agregar un «link» o algo, que diga ¿olvidaste la contraseña? en el mismo LOGIN FORM que pones ahi al lado de el boton «Entrar» y que al apretarlo se quede en el mismo toggle pero cambien los campos, y ponga solo para poner el mail y aparezca un boton «Reset» *variando el nombre obvio*?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *