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:
El HTML
<nav class=“acceder”>
<ul>
<li>
<a id=“login” href=“#”>
Login <span>▼</span>
</a>
<div id=“login-content”>
<form>
<input id=“user” type=“email” name=“Email” placeholder=“Usuario” required>
<input id=“pass” type=“password” name=“Password” placeholder=“Pass” required>
<input type=“submit” id=“submit” value=“Login”>
<label><input type=“checkbox” checked=“checked”> Recuerdame</label>
</form>
</div>
</li>
</ul>
</nav>
|
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 ▼, 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í:
El CSS
nav.acceder ul {
JQuery
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.