Menu que Acende em Cores Plus

Sobre este efeito

Uma barra de navegação de vidro fosco em que cada item tem a sua cor. Uma luz colorida fica atrás do vidro, no item ativo: o vidro espalha a luz, que vaza um pouco pelas bordas, e o filete de cima da barra pega a cor. Com o mouse ou o foco do teclado, a luz desliza até o item apontado e muda de cor no caminho, e volta pro ativo quando o mouse sai. No item apontado, o nome gira como um cubo: a face da frente sobe escurecendo e a de baixo chega tingida da cor do item; o ícone acende na cor dele. No clique, a luz pulsa. No celular, um toque acende e o nome gira uma vez, e em tela estreita fica só o ícone. Cor por item, força da luz, quanto o vidro espalha e quanto a luz vaza, tinta do nome e tempos ajustáveis; links de verdade, que marcam a página atual; modo só-visual pra âncoras e SPA. A luz anda no compositor e, parado, nada roda. CSS e JavaScript puros, sem biblioteca.

Ficha

Categoria

Menu

Onde combina

menu/navegação, topo (hero)

Alcance

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

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

5,4 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

30/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-que-acende-em-cores.

Assuntos

• menu
• navegacao
• navbar
• vidro
• glass
• glow
• brilho
• cores
• luz
• cubo
• 3d
• hover
• abas