Menu vertical colorido com puro css3

Bom dia Galera =), hoje vim trazer este simples menu css3, siga veja na demonstração.

Demonstração

Copie o código abaixo e cole ele acima de ]]></b:skin>

 /* Menu suspenso puro CSS3
----------------------------------------------- */
ul.nice-menu {
  list-style: none;
  margin-top: 30px;
  width: 300px;
}

@-moz-keyframes expand {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-moz-keyframes expand-bounce {
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  50% {
    width: 200px;
  }
  
  70% {
    width: 170px;
  }
  
  80% {
    width: 200px;
  }
  
  90% {
    width: 190px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-webkit-keyframes expand {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-webkit-keyframes expand-bounce {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  50% {
    width: 200px;
  }
  
  70% {
    width: 170px;
  }
  
  80% {
    width: 200px;
  }
  
  90% {
    width: 190px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-moz-keyframes shrink {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-moz-keyframes shrink-bounce {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  50% {
    width: 5px;
  }
  
  70% {
    width: 35px;
  }
  
  80% {
    width: 5px;
  }
  
  90% {
    width: 15px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-webkit-keyframes shrink {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-webkit-keyframes shrink-bounce {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  50% {
    width: 5px;
  }
  
  70% {
    width: 35px;
  }
  
  80% {
    width: 5px;
  }
  
  90% {
    width: 15px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

ul.nice-menu li {
  width: 5px;
  height: 30px;
  line-height: 20px;
  padding: 0px 0px 0px 0px;
  margin-top: 3px;
  background: transparent;
  width: 5px;
}

ul.nice-menu.tight li {
  margin-top: 0 !important;
}

ul.nice-menu li {
  -moz-animation-name: shrink;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li {
  -moz-animation-name: shrink-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu li:hover {
  width: 200px;
  padding-left: 20px;
  -moz-animation-name: expand;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li:hover {
  -moz-animation-name: expand-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu a {
  width: 200px;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  text-shadow: 0px 0px 3px #fff;
  font-weight: bold;
  position: absolute;
  padding: 5px 0px;
  padding-left: 20px;
}

ul.nice-menu li.verde {
  background: #00FF00;
}

ul.nice-menu li.azul {
  background: #00FFFF;
}

ul.nice-menu li.laranja {
  background: #FF4500;
}

ul.nice-menu li.vermelho {
  background: #FF0000;
}


ul.nice-menu li.amarelo {
  background: #FFFF00;
} 
div.cantainer {
  width: 300px;
  margin: 0 auto;
    }

Agora vamos ao html cole o código abaixo ou no gadget Html/Javascript ou na própria postagem

    <div class = "cantainer" style = "">

      <ul class = "nice-menu">
        <li class = "laranja"><a href = "">Inicio</a></li>
        <li class = "vermelho"><a href = "">Animes</a></li>
        <li class = "verde"><a href = "">Filmes</a></li>
        <li class = "azul"><a href = "">Novelas</a></li>
        <li class = "amarelo"><a href = "">Discografias</a></li>

        <li class = "vermelho"><a href = "">Jogos</a></li>
      </ul>
    </div>

Entendo o código

ul.nice-menu li.verde {
  background: #00FF00;
}

ul.nice-menu li.azul {
  background: #00FFFF;
}

ul.nice-menu li.laranja {
  background: #FF4500;
}

ul.nice-menu li.vermelho {
  background: #FF0000;
}


ul.nice-menu li.amarelo {
  background: #FFFF00;
} 

 bom galera cada cor esta escrito ali vede no verde azul no azul e assim sucessivamente, para adicionar novas cores basta repetir o procedimento  que é mostrado abaixo

ul.nice-menu li.example {
  background: #FFFF00;
}

e só vc trocar o example pela cor que vc quer troque o background pela cor que vc escreveu sempre comece por # ou rgb (0,0,0); vc pode encontrar algumas cores neste site que eu costumo usar
WEB COLORS
dai depois para adicoonar o mesmo código ao corpo da postagem ou gadget

    <div class = "cantainer" style = "">

      <ul class = "nice-menu">
        <li class = "example"><a href = "LINK">Nome da Pagina</a></li>

      </ul>
    </div>




Bata alterar o example pela cor que esta no css depois do ul.nice-menu li. que esta como example
e altere o Nome da Pagina pelo nome do link e o link para onde a pessoa sera direcionada
E para alterar a cor do link
Procure por

ul.nice-menu a {
  width: 200px;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  text-shadow: 0px 0px 3px #fff;
  font-weight: bold;
  position: absolute;
  padding: 5px 0px;
  padding-left: 20px;
}

E altere o color pela cor preferencial sua.

Bom é isso galera espero que tenham gostado do tutorial até o próximo