Menu Respingo Ultra

Sobre este efeito

Menu horizontal em que o item ativo tem uma pílula. No clique, a pílula pula pro item novo e, de fora pra dentro, 15 gotas de tinta voam até ela e se fundem como líquido, em cerca de um segundo. Navegação principal, filtro de categorias, abas de seção. Cor da pílula, quatro cores de gota, quantidade, alcance, tamanho, duração e força da fusão ajustáveis; modo só-visual pra âncoras e SPA; acessível (links de verdade, marca a página atual, foco visível). Pensado pra fundo escuro, com modificador pra fundo claro. Sem biblioteca: o JS monta as gotas, o CSS anima e um filtro blur + contraste faz a fusão.

Ficha

Categoria

Menu

Onde combina

menu/navegação, topo (hero), recursos

Alcance

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

Plano

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

Peso

4,8 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

04/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-respingo.

Assuntos

• menu
• navegacao
• goo
• gooey
• liquido
• tinta
• respingo
• pilula
• abas
• filtro
• clique