Menu de categorias com ícones e efeito hover

Views:
<style>
.menuCategoryItems{
margin-top:-20px; /*MARGEM DO TOPO, ALTERE SE PRECISAR SUBIR OU DESCER*/
margin-right: 1px;
margin-bottom: 1px;
margin-left: -10px; /*MARGEM DO ESQUERDA, ALTERE SE PRECISAR */
padding: 2px;
padding-top: 20px;
width: 100%;
}
.menuCategorias .menuCategoryItems:first-of-type{padding-left: 20px;}
.menuCategorias .menuCategoryItems:last-child{padding-right: 5x;}

.menuCategorias{clear: both;}
.menuCategorias a{
color: #000; /*COR DA FONTE*/
display: inline-block;
margin: 20px 14px;
margin-bottom: -10px;
}
.menuCategorias a:hover{
color:#ff5a85; /*COR DA FONTE AO PASSAR O MOUSE*/
text-decoration: none;
}
.menuCategorias .labels{
font:13px "lato"; /*TIPO DA FONTE*/
font-weight: 400;
text-transform: uppercase; /*COLOCA A FONTE EM LETRA MAIÚSCULA, APAGUE SE PREFERIR*/
display:block;
text-align: center;
}
.menuCategorias .ic{
background-image: url(COLOQUE AQUI O ENDEREÇO DE SUA IMAGEM-BASE); /*URL DA IMAGEM-BASE*/
background-repeat: no-repeat;
display:block;
width: 40px;
height: 37px;
margin: 0 auto;
padding-botom: 15px;
}


.menuCategorias .a{}
.menuCategorias .a .ic{background-position: -1px -5px;}
.menuCategorias .a:hover .ic{background-position: 1px -55px;}
.menuCategorias .b{}
.menuCategorias .b .ic{background-position: -53px -5px;}
.menuCategorias .b:hover .ic{background-position: -53px -55px;}
.menuCategorias .c{}
.menuCategorias .c .ic{background-position: -105px -5px;}
.menuCategorias .c:hover .ic{background-position: -105px -55px;}
.menuCategorias .d{}
.menuCategorias .d .ic{background-position: -162px -5px;}
.menuCategorias .d:hover .ic{background-position: -162px -55px;}
.menuCategorias .e{}
.menuCategorias .e .ic{background-position: -220px -5px;}
.menuCategorias .e:hover .ic{background-position: -220px -55px;}
.menuCategorias .f{}
.menuCategorias .f .ic{background-position: -270px -5px;}
.menuCategorias .f:hover .ic{background-position: -270px -55px;}
.menuCategorias .g{}
.menuCategorias .g .ic{background-position: -327px -5px;}
.menuCategorias .g:hover .ic{background-position: -327px -55px;}
.menuCategorias .h{}
.menuCategorias .h .ic{background-position: -385px -5px;}
.menuCategorias .h:hover .ic{background-position: -385px -55px;}
</style>

<div class="menuCategorias">
<div class="menuCategoryItems">
<a href="LINK" class="a"><span class="ic"></span><span class="labels">Nome aqui</span></a>

<a href="LINK" class="b"><span class="ic"></span><span class="labels">Nome aqui</span></a>

<a href="LINK" class="c"><span class="ic"></span><span class="labels">Nome aqui</span></a>

<a href="LINK" class="d"><span class="ic"></span><span class="labels">Nome aqui</span></a>
 
<a href="LINK" class="e"><span class="ic"></span><span class="labels">Nome aqui</span></a>

<a href="LINK" class="f"><span class="ic"></span><span class="labels">Nome aqui</span></a>

<a href="#" class="g"><span class="ic"></span><span class="labels">Nome aqui</span></a>

<a href="LINK" class="h"><span class="ic"></span><span class="labels">Nome aqui</span></a>

</div>
</div>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage