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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>