Formulario de acceso con efecto Dropdown básico

Los componentes mas utilizados en diseño web u aplicaciones son las que despliegan alguna información o mas opciones, por usabilidad, por espacio o también por elegancia, estos componentes son reactivos ya que solo funcionan cuando el usuario ejecuta una acción. con esta opción dropdown podemos desplegar cualquier tipo de contenido, en este tutorial vamos a ver como desplegar un formulario de acceso, aunque también puede ser un formulario de contacto o de registro.

Esto es lo que vamos a conseguir:

dropdown-login-form-tutorial

Así que vamos a utilizar un poco de imaginación, HTML para hacer la estructura, CSS para dar una buena apariencia y jQuery para hacerlo funcional. Así que vamos a comenzar.

El HTML

El HTML es básico, dentro del nav una lista desordenada el ítem de la lista y un enlace donde se muestra el nombre del enlace y al lado un triangulo que esta incrustado por medio de la identidad Unicode &#x25BC, la idea es que cuando se haga clic en el enlace se despliegue el formulario que esta dentro de un id contenedor con id=”login-content”, dentro del formulario los respectivos campos. Algo mas o menos así:

tutorial-login-dropdown-html

El CSS

Y aquí las propiedades css para cada uno de los elementos HTML, son estilos básicos para dar una buena apariencia y creo que no vale la pena explicarlos.

jQuery

Seguimos con el script para dar funcionalidad a este dropdown.

En la parte de los scripts primero cargamos jQuery, ya sea desde un CDN o desde una carpeta local, y luego en el script lo que hacemos es que cuando le demos clic al enlace con #login muestre el contenido de #login-content con el método SlideToggle() que crea un efecto slide tanto para ocultar como para mostrar el contenido de este div. En el segundo bloque del script lo que hacemos es verificar con if y else el estado actual del elemento, si esta activa incrusta la identidad ▲, si no esta activa deja la identidad ▼ dentro del elemento span.

Y esto es todo!!, un tutorial básico pero que puede resultar útil para algo, bueno eso espero.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

7 Respuestas

  1. jpg dice:

    interesante

  2. Juan dice:

    que cambios debo hacerle para que funcione en php

  3. RedaHartzyv dice:

    I have read so many articles or reviews regarding the blogger lovers except this article is actually a pleasant paragraph, keep it up.

  4. This excellent website truly has all of the information I needed concerning this subject and didn’t know who to ask.

  5. Jhon James M dice:

    Cordial saludo,
    Excelente tutorial. Forma muy clara como explicas los conceptos.
    Una pregunta:
    En el programa o sitio generas las imágenes que publicas con flechitas y comentarios.?

    Gracias por la informaciín.

  1. septiembre 14, 2014

    Cordial saludo,
    Excelente tutorial. Forma muy clara como explicas los conceptos.
    Una pregunta:
    En el programa o sitio generas las imágenes que publicas con flechitas y comentarios.?

    Gracias por la informaciín.