Como usar: Ícones de Menu Hambúrguer
- Passe o mouse sobre um ícone para vê-lo abrir, ou marque Mostrar estado aberto para ver todos abertos. Clique no que você gostar.
- Defina a largura, espessura, espaçamento, cor e velocidade. Cada ícone é atualizado em tempo real.
- Copie o CSS, o HTML e o JS, ou use Copiar tudo para obter um único bloco.
- Para o Webflow, clique em Copiar para o Webflow e cole no Designer com Ctrl/⌘+V.
Um botão de menu que todos podem usar
Cada ícone é um <button> de verdade, não uma div clicável, então funciona com teclado e leitores de tela sem nenhuma configuração extra.
- aria-expanded informa às tecnologias assistivas se o menu está aberto, e o CSS usa o mesmo atributo para animar. Uma única fonte de verdade.
- aria-label dá nome ao botão, já que ele não tem texto visível.
- Área de toque: o padding mantém a área clicável com pelo menos 44 pixels em cada lado.
- Movimento reduzido desativa a animação para visitantes que pedem menos movimento na tela.
Conectando ao seu menu
O pequeno script alterna aria-expanded ao clicar. Para mostrar o seu menu, adicione aria-controls="menu" e uma regra como .burger[aria-expanded="true"] ~ #menu { display: block; }, ou alterne uma classe no menu no mesmo manipulador de clique.
No Webflow, Copiar para o Webflow cola um Embed com o ícone, os estilos e o script. Para abrir uma navbar do Webflow com ele, coloque o Embed dentro do elemento Menu Button da navbar. Veja também: Estilos de Botão em CSS, Gerador de Animação Hover em CSS, Gerador de Loader em CSS.
Também pesquisado como: ícone menu hambúrguer, animação menu hambúrguer, menu hambúrguer animado css, css menu hambúrguer, animação ícone menu, ícone hambúrguer para x, menu hambúrguer webflow, hamburger menu css.
Ferramentas que combinam com: Ícones de Menu Hambúrguer
- Gerador de Botão CSS — Crie um botão que fica ótimo em todos os estados.
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
- Gerador de Select — Chega de digitar listas de opções na mão.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.