DEMONSTRAÇÃO DO MENU LEQUE:
CÓDIGO COMPLETO DO MENU LEQUE
<center>
<style>
ul.leque {
position: relative;
width: 300px;
height: 300px;
margin: 40px auto;
list-style: none !important;
font: normal 16px "arial narrow", sans-serif;
}
ul.leque li {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 300px;
background: #B03060;
margin-left: -50px;
line-height: 300px;
text-align: center;
-moz-transform-origin: top center;
-webkit-transform-origin: top center;
transform-origin: top center;
-moz-transition: all .4s ;
-webkit-transition: all .4s ;
transition: all .4s ;
}
ul.leque li a {
display: inline-block;
width: 100px;
height: 48px;
text-decoration: none;
color: white;
line-height: 40px;
vertical-align: bottom;
}
ul.leque:hover li {
opacity: 1;
}
ul.leque:hover li:nth-of-type(6) {
opacity: 0;
}
ul.leque:hover li:nth-of-type(1) {
background: #FF7F50;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul.leque:hover li:nth-of-type(2) {
background: #8B795E;
-moz-transform: rotate(22deg);
-webkit-transform: rotate(22deg);
transform: rotate(22deg);
}
ul.leque:hover li:nth-of-type(3) {
background: #4876FF;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
ul.leque:hover li:nth-of-type(4) {
background: #CD3333;
-moz-transform: rotate(-22deg);
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg);
}
ul.leque:hover li:nth-of-type(5) {
background: #B03060;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
<ul class="leque">
<li><a href="LINK AQUI">HOME</a></li>
<li><a href="LINK AQUI">QUEM SOMOS</a></li>
<li><a href="LINK AQUI">CONTATO</a></li>
<li><a href="LINK AQUI">ANUNCIE AQUI</a></li>
<li><a href="LINK AQUI">FAQ</a></li>
<li><a href="javascript:void();">MENU</a></li>
</ul>
</center>
