Menu Sidebar Colorido com Css

Neste artigo vamos criar um Menu Sidebar Colorido com Css.

Nós vamos usar o pseudo-elemento ::AFTER e o pseudo-classe :nth-child ()

Pseudo-elemento ::AFTER

cria um último filho do elemento selecionado.

Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade content.

É inline por padrão. a::after { content: “”; }

Exemplo o AFTER : Modo normal

nav li a:after { width:0px; }

Modo Hover

nav li a:hover:after{ width: 100%; }

Pseudo-classe :nth-child () 

A pseudo-classe :nth-child () CSS corresponde a elementos baseados em sua posição em um grupo de irmãos.

:nth-child () toma um único argumento que descreve um padrão para combinar índices de elementos em uma lista de irmãos.

Exemplo os elementos cuja posição numérica em uma série de irmãos em ordem na sequencia: 1, 2, 3,4 …

Exemplo o :nth-child () 

nav li:nth-child(1) a:after{ background: #f7ed62; }
nav li:nth-child(2) a:after{ background: #ffab61; }
nav li:nth-child(3) a:after{ background: #b95f57; }
nav li:nth-child(4) a:after{ background: #e85151; }
nav li:nth-child(5) a:after{ background: #1acc78; }

Vamos Adicionar os códigos html

<nav>

  <ul>

    <li><a href=""><i class="icofont-juice"></i> Bebidas</a></li>
    <li><a href=""><i class="icofont-fast-food"></i> Lanches</a></li>
    <li><a href=""><i class="icofont-coffee-mug"></i> Café</a></li>
    <li><a href=""><i class="icofont-sushi"></i> Sushi </a></li>
    <li><a href=""><i class="icofont-fruits"></i> Frutas</a></li>

  </ul>

</nav>

Vamos adicionar o Css

nav{
  float: none; 
  clear: both;
  width: 30%; 
  margin: auto;
  background:transparent;
}

nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

nav li{
  
  float: none; 
  width: 100%;
  margin-bottom: 2px;
  background: #f2f1f1;

}

nav li a{
  display: block; 
  width: 100%; 
  padding: 20px; 
  border-left: 5px solid; 
  position: relative; 
  z-index: 2;
  text-decoration: none;
  color: #444;
  box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box; 
  transition: all 0.3s ease 0s; 
  -webkit-transition: all 0.3s ease 0s; 
}

nav li a i { font-size:1.5em; }

nav li a:hover{ border-bottom: 0px; color: #fff; }
nav li:nth-child(1) a{ border-left: 10px solid #f7ed62; }
nav li:nth-child(2) a{ border-left: 10px solid #ffab61; }
nav li:nth-child(3) a{ border-left: 10px solid #b95f57; }
nav li:nth-child(4) a{ border-left: 10px solid #e85151; }
nav li:nth-child(5) a{ border-left: 10px solid #1acc78; }

nav li a:after { 

  content: "";
  height: 100%; 
  left: 0; 
  top: 0; 
  width: 0px;  
  position: absolute; 
  transition: all 0.3s ease 0s; 
  -webkit-transition: all 0.3s ease 0s; 
  z-index: -1;
}

nav li a:hover:after{ width: 100%; }
nav li:nth-child(1) a:after{ background: #f7ed62; }
nav li:nth-child(2) a:after{ background: #ffab61; }
nav li:nth-child(3) a:after{ background: #b95f57; }
nav li:nth-child(4) a:after{ background: #e85151; }
nav li:nth-child(5) a:after{ background: #1acc78; }

Veja como ficou o nosso menu sidebar colorido com Css.

Baixar Código Veja Funcionando