Barra que Vira Painel Ultra

Sobre este efeito

Uma barra de abas em vidro fosco que cresce numa mola e vira um painel com o conteúdo da aba. Passar o mouse numa aba abre; com o painel aberto, parar noutra aba troca o conteúdo e o tamanho sem fechar; sair fecha. No celular, tocar abre e troca, e tocar de novo ou fora fecha. No teclado, Enter e Espaço abrem e fecham, as setas andam entre as abas, Tab entra no painel e Esc fecha e devolve o foco. O conteúdo fica parado e só o recorte e uma camada de vidro andam, então é leve; o canto do vidro fica redondo o tempo todo. Cada painel mede o próprio conteúdo, a aba do painel aberto fica marcada, na troca um conteúdo esmaece enquanto o outro entra, e a troca espera o mouse parar um instante numa aba. A barra cabe em tela de celular. Com menos movimento o painel aparece sem mola. O painel abre por cima da página, sem empurrar nada, para cima (dock) ou para baixo (barra no topo). Mola, tempos, espera, largura, vidro, desfoque e cores ajustáveis.

Ficha

Categoria

Menu

Onde combina

menu/navegação, recursos

Alcance

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

Plano

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

Peso

9,3 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

18/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-barra-que-vira-painel.

Assuntos

• menu
• navegacao
• barra
• dock
• abas
• painel
• vidro
• mola
• teclado