Menu em Cartões Ultra

Sobre este efeito

Barra de navegação que flutua no topo da capa, com hambúrguer, marca no centro e botão de ação. No clique, as duas linhas do hambúrguer viram um X, a barra cresce pra baixo e os cartões (um por grupo de links) sobem e aparecem em sequência; fechar toca a mesma sequência de trás pra frente, do último cartão pro primeiro e depois a barra encolhendo. Quantos cartões quiser, cada um com título e links com seta; no celular eles empilham e o botão de ação sai. Fecha no Esc, no clique fora e no clique num link; o leitor de tela sabe quando está aberto e o teclado não cai nos cartões fechados. Cores da barra e de cada cartão, cantos, subida, tempo e intervalo entre cartões ajustáveis. Sem biblioteca: transições CSS por classe, o JS só mede a altura aberta.

Ficha

Categoria

Menu

Onde combina

menu/navegação, topo (hero)

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

5,1 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 9% do processador de um celular intermediário enquanto anima.

Na loja desde

11/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-menu-em-cartoes.

Assuntos

• menu
• navegacao
• navbar
• hamburguer
• cartoes
• cards
• mega-menu
• dropdown
• clique
• css-puro