Menu Lateral Html Css

Botão Css com Icones de Redes Sociais Efeito Vertical

Menu Efeito Hover Sublinhado

Postado: 24 de março de 2025 Tempo de Leitura: 2 Minutos

Neste artigo vamos criar um Menu Lateral Html Css estilizado com Css3. ao passar o mouse sobre o elemento html ul, li as animações inicia conforme programado e estilizado nos Códigos Css de cada link do menu.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para projetar o Menu vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <nav>, <ul>, <li> e a tag <a> para inserirmos o texto.

Essas tags que usaremos para criar os Menu Lateral Html Css.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Menu Lateral.

Estrutura Código Html:

HTML

<nav class="menu-lateral">

  <ul>

    <li><a href="#">Home</a></li> 
    <li><a href="#">Sobre</a></li> 
    <li><a href="#">Cursos</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contato</a></li>

  </ul>

</nav>

Estrutura Código CSS

Para conseguirmos o efeito desejado nos Menu, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os Menu com o efeito desejado.

CSS

.menu-lateral {
 
  width:300px;
  margin:auto;
  
}

.menu-lateral ul{
 
  width:100%;
  float: left;
  height:auto;
  background-color:transparent;
  display:block;
  margin:0;
  padding:0;

}

.menu-lateral li{

  list-style: none;
  width:100%;
  float:left;
  margin-bottom: 1px;

}

.menu-lateral li a { 

  display: block;
  text-decoration:none; 
  color:#ffffff;
  background-color:#202020;
  width: 100%;
  font-family:'open_sansregular';
  font-size: 18px;
  padding: 12px 0px;
  text-align: center;

}

.menu-lateral li a:hover{

  color:#202020;
  background-color:#FFB300;

} 

.menu-lateral li a{

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

}

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!