Carregando...

Menu Lateral Html Css

Postado: 2 de março de 2024 Tempo de Leitura: 2 Minutos

Menu Lateral Html Css

Menu Lateral Html Css

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:

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

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

Menu Lateral Html Css

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar Menu Lateral Html Css.

existem diversas formas de estilizar Menus com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

Publicado por: Loop Nerd

134 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