Menu Sidebar Css

Menu Sidebar Css

Este tutorial veremos como criar um Menu Sidebar com html e css com efeito no link ao passar o mouse.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tags: <nav>, <ul>, <li> e a tag <a> para inserirmos o link de destino.

Essas tags usaremos para criar a nosso Menu sidebar simples com html e css.

Vamos Adicionar o HTML

   <nav class="sidebar">

       <ul>
           <li><a href="#"><i class="icon icon-arrow-small-right"></i> Página Inícial</a></li>
           <li><a href="#"><i class="icon icon-arrow-small-right"></i> Códigos Html</a></li>
           <li><a href="#"><i class="icon icon-arrow-small-right"></i> Códigos Css</a></li>
           <li><a href="#"><i class="icon icon-arrow-small-right"></i> jQuery</a></li>
           <li><a href="#"><i class="icon icon-arrow-small-right"></i> WordPress</a></li>
       </ul>

   </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e projetar o nosso Menu Sidebar com css.

.sidebar {     

    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px;
    width:300px;
    padding:10px; 

}

.sidebar ul {

    list-style-type: none;

}

.sidebar ul li {

  padding: 6px 0;

}

.sidebar ul li a i { font-size:1.1em; }

.sidebar ul li a {
  
  position: relative;
  display: block;
  padding: 4px 0;
  font-size:1em;
  font-family: 'open_sansregular';
  color: #555555;
  text-decoration: none;
  transition: 0.5s;

}

.sidebar ul li a::after {
 
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0dc9cc;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}

.sidebar ul li a:hover {
  color: #95a5a6;
}

.sidebar ul li a:hover::after {
  
  transform: scaleX(1);
  transform-origin: left;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando