Merida Design Blog

Publicado el | Snippets / , ,

Icono de menú con CSS3

El snippet que te comparto a continuación es para crear el ícono usado como representación del menú, también conocido como menú hamburguesa, usando únicamente un elemento a y unas cuentas líneas de código CSS3.

<a class="menu-button"></a>
.menu-button {
  display: block;
  width: 20px;
}
.menu-button:before,
.menu-button:after {
  background-color: black;
  content: '';
  display: block;
  height: 3px;
}
.menu-button:before {
  box-shadow: 0 6px 0 black;
  margin-bottom: 9px;
}

Te dejo el demo en donde únicamente le agregué animaciones para fines de presentación.

See the Pen Animated Hamburger Menu by Iván Villamil (@ivillamil) on CodePen.

Conclusión

Este es solo una muestra de lo que se puede lograr con css y un poco de creatividad.
Si quieres ver más ejemplos te recomiendo visita la página de Nicolas Gallagher.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: