Icono menú animado

HTML Descargar

22-11-19 HTML :after :before Descargar

Creamos con HTML el típico icono de tres barras horizontales, que nos abre el menú de navegación de una página Web en dispositivos, lo animamos para los diferentes estados y añadimos Javascript a su comportamiento.

En este snippet creamos un icono para abrir el menú principal de nuestra página Web. Con un código HTML simple y ayudado con los pseudo-elements :before y :after, aunque aquí tenemos que aclarar, según la version 3 de CSS la sintaxis correcta ::before y ::after sin dos veces los dos puntos son de versiones anteriores a la 3 de CSS. Pero las versiones actuales de navegadores permiten el error de sintaxis y lo dan por valido, vamos puedes escribirlo con : o, :: que solo las versiones de navegadores antiguos no reconocerán :: y darán error.

Por tanto con un simple HTML y desarrollando los estilos creamos el gráfico con control total de su tamaño, siendo perfecto para insertar en los cortos espacios de las pantallas de los móviles.

Es un botón muy sencillo de hacer y de muy buenas prácticas, le añadimos una animación CSS y con jQuery le injectamos una clase, cuando cambia su estado.

Veamos el markup, en cuestión.

HTML


<a href="#" class="bars-icon-btn">
  <div class="bars-icon-img">
    <div class="bars-icon-img-div"></div>
  </div>
</a>

Estos son los estilos aportados.

CSS


a.bars-icon-btn {
  position: relative;
  display: block;
  padding: 0;
  width: 82px;
  height: 78px;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a.bars-icon-btn .bars-icon-img {
  position: absolute;
  top: 30px;
  left: 30px;
  margin: 0;
  width: 22px;
  height: 18px;
}
a.bars-icon-btn .bars-icon-img:before,
a.bars-icon-btn .bars-icon-img:after,
a.bars-icon-btn .bars-icon-img div.bars-icon-img-div {
  content: '';
  display: block;
  height: 2px;
  margin: 0 0 6px;
  border-radius: 6px;
  background-color: #656565;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a.bars-icon-btn .bars-icon-img:after {
  margin: 0;
}
a.bars-icon-btn:hover {
  background-color: #e5e5e5;
  border: 1px solid #d5d5d5;
}
a.bars-icon-btn:hover .bars-icon-img:before,
a.bars-icon-btn:hover .bars-icon-img:after,
a.bars-icon-btn:hover .bars-icon-img div.bars-icon-img-div {
  background-color: #5680cf;
}
a.bars-icon-btn.active .bars-icon-img:before {
  -webkit-transform: translateY(8px) rotate(135deg);
  -moz-transform: translateY(8px) rotate(135deg);
  -ms-transform: translateY(8px) rotate(135deg);
  -o-transform: translateY(8px) rotate(135deg);
  transform: translateY(8px) rotate(135deg);
}
a.bars-icon-btn.active .bars-icon-img:after {
  -webkit-transform: translateY(-8px) rotate(-135deg);
  -moz-transform: translateY(-8px) rotate(-135deg);
  -ms-transform: translateY(-8px) rotate(-135deg);
  -o-transform: translateY(-8px) rotate(-135deg);
  transform: translateY(-8px) rotate(-135deg);
}
a.bars-icon-btn.active .bars-icon-img div.bars-icon-img-div {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
a.bars-icon-btn.active,
a.bars-icon-btn.active:hover {
  background-color: #e5e5e5;
  border: 1px solid #d5d5d5;
}
a.bars-icon-btn.active .bars-icon-img:before,
a.bars-icon-btn.active .bars-icon-img:after,
a.bars-icon-btn.active .bars-icon-img div.bars-icon-img-div
a.bars-icon-btn.active:hover .bars-icon-img:before,
a.bars-icon-btn.active:hover .bars-icon-img:after,
a.bars-icon-btn.active:hover .bars-icon-img div.bars-icon-img-div {
  background-color: #5680cf;
}

Con esta función le injectamos la clase.

jQuery


$('.bars-icon-btn').click(function(e) {
  e.preventDefault();
  if($('.bars-icon-btn').hasClass('active')){
    $(this).removeClass('active');
  }
  else{
    $(this).addClass('active');
  }
});

Se puede ver como funciona el ejemplo en CodePen.

See the Pen Icono menu animado by Smoothemes (@smoothemes) on CodePen.0

Descargar snippet

Si te ha sido útil este snippet, te agradecería dejases un comentario, mas abajo. Gracias