A Apple fez algum barulho quando lançou um site atualizado, incluindo uma navegação responsiva totalmente nova. Enquanto o redesenho estava focado em outras coisas, uma coisa que se destacou foi o uso de um ícone de menu de hambúrguer em uma navegação responsiva recém-projetada. E, não qualquer hambúrguer, um sem carne - apenas os pães. Pode ser uma afirmação sobre simplicidade ou algo assim, mas aqui está como podemos recriá-lo com o mesmo efeito animado que transforma o ícone de um hambúrguer em um ×.
O código a seguir pressupõe o 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'); ));Veja o menu Pen Apple's Hamburger Buns por CSS-Tricks (@ css-tricks) em CodePen.
Outros Exemplos
Se você estiver interessado em outros exemplos de um ícone de menu alinhado, há uma grande coleção no CodePen que você pode navegar.