Carregando...

Sidebar Html Css com Efeito Slide

Postado: 17 de janeiro de 2025 Tempo de Leitura: 2 Minutos

Sidebar Html Css com Efeito Slide

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:

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.

CSS
.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

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados