Menu Vertical Animado com Css

Neste artigo vamos criar um menu vertical animado com css

Vamos Adicionar o html:

<nav class="menu-vertival">

  <ul>
    
    <li><a href="#" class="line"> <span> Html </span> </a></li>
    <li><a href="#" class="line"> <span> Css </span></a></li>
    <li><a href="#" class="line"> <span> Jquery </span></a></li>
    <li><a href="#" class="line"> <span> WordPress </span></a></li>
  
  </ul>

</nav>

Vamos Adicionar o Css:

.menu-vertival { margin:auto; float:none; max-width:300px; width:100%; }

ul,li {
  
  margin: 0;
  padding: 0;
  list-style: none;

}

li {
  
  position: relative;
  float: left;
  width:100%;
  display: block;
  margin-bottom:1px!important;
  overflow:hidden!important;
  border-radius:8px;

}

.line span { z-index:1; position:relative; }

.line {

  display: block;
  padding: 0 25px;
  line-height: 40px;
  text-decoration: none;
  color:#ffffff;
  background-color:#4c4c4c;

}

.line:hover { color:#2dcfdf; transition:0.3s; }

.line:after {

    content: '';
    position: absolute;
    bottom: -15px;
    left: -60px;
    display: block;
    height: 70px;
    width: 70px;
    border-radius: 100%;
    text-align: center;
    background-color: #757575;
    transition: 0.3s;

}


li:hover .line:after {
  left:-50px;
  background-color:#2dcfdf; 
}

Veja o código funcionando:

Baixar Código Veja Funcionando