Menú de pan de hamburguesa de Apple.com | Programar Plus

Apple hizo algo de ruido cuando lanzó un sitio actualizado, que incluía una navegación receptiva completamente nueva. Si bien el rediseño se centró en otras cosas, una cosa que sobresalió fue el uso de un ícono de menú de hamburguesas en una navegación receptiva de nuevo diseño. Y, no cualquier hamburguesa, una sin carne, solo los bollos. Podría ser una declaración de simplicidad o lo que sea, pero así es como podemos recrearlo con el mismo efecto animado que transforma el ícono de una hamburguesa a una ×.

El siguiente código asume el uso de autoprefixer.

.hamburger {
  cursor: pointer;
  position: absolute;
  width: 48px;
  height: 48px;
  transition: all 0.25s;
}

.hamburger__top-bun,
.hamburger__bottom-bun {
  content: '';
  display: block;
  position: absolute;
  left: 15px;
  width: 18px;
  height: 1px;
  background: #fff;
  transform: rotate(0);
  transition: all 0.25s;
}

.hamburger:hover [class*="-bun"] {
  background: #999;
}

.hamburger__top-bun {
  top: 23px;
  transform: translateY(-3px);
}

.hamburger__bottom-bun {
  bottom: 23px;
  transform: translateY(3px);
}

.open {
  transform: rotate(90deg);
}

.open .hamburger__top-bun {
  transform: 
    rotate(45deg) 
    translateY(0px);
}

.open .hamburger__bottom-bun {
  transform: 
    rotate(-45deg) 
    translateY(0px);
} 
$('.hamburger').click (function(){
  $(this).toggleClass('open');
});

Vea el menú de bollos de hamburguesa de Pen Apple por Programar Plus(@css-tricks) en CodePen.

Otros ejemplos

Si está interesado en otros ejemplos de un ícono de menú alineado, hay una gran colección en CodePen que puede explorar.

(Visited 6 times, 1 visits today)