Seleccionar página

Formulario de acceso con efecto Dropdown básico

por | Dic 5, 2014 | Diseño web | 0 Comentarios

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

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 &#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

 nav.acceder ul {

  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #fff;
}
li a span {
  font-size: 10px;
}
nav.acceder #login,
nav.acceder #signup a {
  display: inline-block;
  font-size: 13px;
  height: 25px;
  line-height: 25px;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}
nav.acceder #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;    
  background: #fff;
  padding: 15px;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  border-radius: 10px 0 10px 10px;
  width: 250px;
}
input#user, input#pass {
  background: #f1f1f1;
  padding: 6px 5px;
  margin-bottom: 10px;
  width: 238px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 1px #ccc inset;
}
#submit {    
  background-color: #359AC2;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
  border: 1px solid #1B6F91;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}
#submit:hover,
#submit:focus {    
  background-color: #044E6B;
}
#submit:active {  
  outline: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
}
label {
  float: right;
  line-height: 30px;
  font-size: 13px;
  color: #666;
}
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

<script src=«http://code.jquery.com/jquery-1.11.0.min.js»></script>
<script>
    $(function(){
       $(‘#login’).click(function(){
       $(this).next(‘#login-content’).slideToggle();
       $(this).toggleClass(‘active’);          
        
       if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘&#x25B2;’)
          else $(this).find(‘span’).html(‘&#x25BC;’)
       })
    });
</script>

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.