Menú con transiciones CSS

Publicado por Monchito

En este tutorial aprenderemos a crear un menú con un efecto de cortina que se produce cuando el puntero del ratón se ubica en cada uno de los items de nuestro menú. Cómo siempre, hay un ejemplo en vivo donde puedes ver el resultado final y jugar un poco con el código.

Nota: Internet Explorer 9 y versiones anteriores no traen soporte para transition. El menú se mostrará normalmente sin desplegar el efecto de transición.

Comenzaremos con el HTML, definiendo cada uno de los items de nuestro menú.

<a class="menu servicios" href="#" data-title="Servicios">
  <span>
    <span>Servicios</span>
  </span>
</a>

Tendremos dos capas idénticas, una encima de la otra, excepto que una de ellas tendrá un color de fondo diferente a la hora en que el usuario posicione el puntero del ratón encima de ella. Es importante que las etiquetas en data-title y span sean exactamente iguales, ya que ese será el texto que se desplegará tanto en el mouse over como en el mouse out.

Terminamos de crear nuestro menú agregando cada uno de los cuatro items a una lista, a como se ve en el ejemplo en vivo, y procedemos a darle formato al mismo.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: inline;
  float: left;
  text-decoration: none;
  font-family: sans;
}

Formato de cada item en el menú, incluyendo el borde superior de color:

/* Formato general de cada item */

.menu {
  display: block;
  position: relative;
  height: 76px;
  width: 120px;
  margin: 0;
  overflow: hidden;
}

/* Bordes superiores */

.menu.servicios {
  border-top: #ffc000 0.3em solid;
}

.menu.recursos {
  border-top: #b81800 0.3em solid;
}

.menu.proyectos {
  border-top: #00a53c 0.3em solid;
}

.menu.contacto {
  border-top: #9600b4 0.3em solid;
}

La transición para el efecto de cortina. Asegúrate de incluir el prefijo -webkit- de la propiedad transition para que funcione sin problemas en versiones antiguas del navegador Chrome.

.menu > span {
  display: block;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
}

El CSS para las capas del menú.

.menu:after, .menu > span > span {
  display: block;
  text-align: center;
  border-radius: 0em;
  padding: 2em 0 1.5em;
}

.menu:after {
  content: attr(data-title);
  width: 100%;
  background: #000;
  color: #fff; 
}

.menu > span > span {
  width: 120px;
  color: #fff;
}

Los colores que tendrá el menú de fondo al hacer mouse over…

.menu.servicios > span > span {
  background: #ffc000;
}

.menu.proyectos > span > span {
  background: #00a53c;
}

.menu.recursos > span > span {
  background: #b81800;
}

.menu.contacto > span > span {
    background: #9600b4;
}

…y la parte del código que hace que se rellene todo el alto del menú con el color especificado en el fragmento anterior.

.menu:hover > span {
    height: 100%; 
}

¡Y eso es todo! Para cambiar el efecto del menú de vertical a horizontal, solo debe cambiarse las siguientes tres líneas de código:

En .menu > span intercambiar los valores del alto y ancho…

  width: 0%;
  height: 100%;

…y en .menu:hover > span sustituir height por width.

  width: 100%; 

Juega un poco con el código y déjanos en los comentarios un enlace al menú con tus cambios y mejoras. Happy hacking!