versão carregada: sexta, 12 de julho de 2024

Como Criar um Menu Lateral com Transição e Animação CSS

O exemplo a seguir usa dois componentes React e um arquivo css para criar um menu animado, que quando acionado, desliza da lateral direita da tela e se expande até 400px. Não requer instalação de nenhuma biblioteca extra. O código foi abreviado para fins de resumir a explicação da ideia.

Inclui uma demonstração em vídeo. Customize como desejar:

Demonstração

Mãos ao Código

const [sidebarShow, toggleSidebarShow] = useState(false);
return (
    <>
        <button
            onClick={() => toggleSidebarShow(!sidebarShow)}
            className="btn-navbar btn-account"
            >
               <Icon name="user" /> Account
        </button>
        <AccountMenu show={sidebarShow} toggle={toggleSidebarShow} />
    </>
  );
// Fechar o menu quando clicar fora dele 
document.body.addEventListener("click", function (evt) {
        if (show && !evt.target.closest(".account-menu")) {
            toggle(false);
        }
    });

const currentClass = show ? 'show' : 'hide';
return (<aside className={'account-menu ' + currentClass}>
                <h4 className="email">{email}</h4>
                <strong className="label-plan"><small>Subscription Plan</small></strong>
                  // Coloque aqui seu próprio menu
                <button className="btn-signout">Sign Out</button>
            </aside>
  );
@keyframes width-slide-in {
    0% {
        width: 0;
        opacity: 0;
        display: none;
      }
      35% {
        width: 400px;
      }
    100% {
        opacity: 1;
        width: 400px;
        display: block;
    }
  }
  
aside.account-menu {
    font-size: 14.224px;
    background: #1c2146;
    color: #fff;
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    padding: 0;
    z-index: 1;
  transition-duration: 0.5s;
  animation: width-slide-in 0.5s forwards;
}

aside.account-menu.hide {
    visibility: hidden;
    display: none;
}
aside.account-menu.show {
    visibility: visible;
    display: block;
}
Quer saber mais sobre como funciona? Fale com um desenvolvedor agora mesmo!
Este artigo foi lido 74+ vezes. Obrigado por ler até aqui! Fique à vontade pra copiar e compartilhar. Ajude sempre seus colegas. O conhecimento muda vidas!

O conteudo foi útil? Isso é ótimo. Quer incentivar mais posts como esse? Mostre seu apoio com qualquer valor.
Chave PIX: d0311e58-cb6e-4d47-b3d8-3d4254763ce7

Inscrever-se
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments

Tags relacionadas