- Página Inicial
- Códigos CSS Prontos
- Sidebar Html Css com Efeito Slide
- Voltar
Sidebar Html Css com Efeito Slide

No desenvolvimento de interfaces web, a sidebar (barra lateral) é um componente essencial para melhorar a navegação e organização de conteúdos em uma página.
Neste tutorial detalhado, você aprenderá a construir um menu sidebar com um efeito de slide suave e elegante, utilizando apenas HTML e CSS.
Exploraremos técnicas para personalizar a aparência e o comportamento da sua sidebar, quando o usuário passar o mouse sobre o menu a animação com efeito slide é acionada.
O que é uma Sidebar?
A sidebar é uma área da interface de usuário que fica, geralmente, posicionada à esquerda ou à direita da tela, e serve para organizar links, menus ou informações adicionais. Esse componente é muito utilizado em sites e aplicações para facilitar a navegação e maximizar o uso do espaço disponível na tela.
O efeito de slide na sidebar é especialmente útil quando o objetivo é esconder a barra lateral quando não for necessária, garantindo que o design da página seja mais clean e otimizado para dispositivos móveis.
Crie Sidebar Deslizante com HTML e CSS
Vamos construir uma sidebar deslizante moderna e responsiva, inspirada em designs populares. Acompanhe passo a passo a criação deste componente e aprenda a adaptá-lo ao seu próprio projeto.
Estrutura HTML
A estrutura básica de uma sidebar com efeito de slide pode ser montada com o seguinte código HTML:
<div class="container-sidebar">
<h2>Menu Sidebar</h2>
<ul>
<li><a href="#" target="_blank">Códigos Html e Css</a></li>
<li><a href="#" target="_blank">Templates Html e Css</a></li>
<li><a href="#" target="_blank">Menus Responsivos</a></li>
<li><a href="#" target="_blank">Botões animados com Css</a></li>
</ul>
</div><!--Fecha Sidebar-->
Estilização com CSS
A seguir, criamos a parte visual da sidebar com CSS, incluindo o efeito de deslizamento.
Usaremos propriedades como transform
e transition
para permitir que a sidebar deslize de da esquerda para direita.
.container-sidebar {
margin: auto;
width: 300px;
padding: 20px;
background-color: #ffffff;
box-shadow: 1px 0px 1.2px 0px #e3e3e3;
border-radius:3px;
}
.container-sidebar h2 {
color: #2196f3;
margin: 0;
padding: 0 0 0 20px;
border-left: 5px solid #2196f3;
}
.container-sidebar ul {
margin: 20px 0;
padding: 0;
list-style: none;
}
.container-sidebar ul li {
position: sticky;
border-bottom: 1px solid rgba(147, 147, 147, 0.1);
overflow: hidden;
}
.container-sidebar ul li a { color:#808080; text-decoration:none; padding: 5px 10px; display:block; }
.container-sidebar ul li a:hover { color:#fff; }
.container-sidebar ul li:before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: #2196f3;
z-index: -1;
transition: 0.3s;
}
.container-sidebar ul li:hover:before {
left: 0;
}
Ao combinar HTML e CSS, podemos criar uma sidebar com efeito de slide, oferecendo uma experiência interativa e moderna aos usuários.
Conclusão Sidebar Html Css
A criação de uma sidebar com efeito de slide é uma maneira eficaz de melhorar a navegação do seu site sem ocupar espaço excessivo na tela.
A combinação de HTML e CSS permite criar esse componente de forma simples e eficiente, proporcionando uma experiência de usuário agradável e dinâmica.
Esse exemplo pode ser adaptado para diferentes layouts e necessidades, como adicionar ícones, animações mais complexas ou tornar a sidebar responsiva para dispositivos móveis, oferecendo flexibilidade no design e na funcionalidade.
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
73 Visualizações
Deixe um comentário