Apple hizo algo de ruido cuando lanzaron un sitio actualizado, incluida una navegación receptiva completamente nueva. Si bien el rediseño se centró en otras cosas, una cosa que se destacó fue el uso de un ícono de menú de hamburguesa 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 Apple de Pen por CSS-Tricks (@ 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.
