Menu fofo

Views:
<menu class="menu1">

<a href="ENDEREÇO DO LINK" data-hover="NOME DA CASA"><span>NOME DA CASA</span></a>

<a href="ENDEREÇO DO LINK" data-hover="NOME DA CASA"><span>NOME DA CASA</span></a>
<a href="http://www.elainegaspareto.com/p/todas-as-dicas-para-blogs.html" data-hover="NOME DA CASA"><span>NOME DA CASA</span></a>

<a href="ENDEREÇO DO LINK" data-hover="NOME DA CASA"><span>NOME DA CASA</span></a>

<a href="ENDEREÇO DO LINK" data-hover="NOME DA CASA"><span>NOME DA CASA</span></a>

<a href="ENDEREÇO DO LINK" data-hover="NOME DA CASA"><span>NOME DA CASA</span></a>
</menu>



<style>menu a {margin-top: -15px;position: relative; display: inline-block; text-decoration: none; font: 15px Verdana; -webkit-text-shadow: 1px 0px #333; -moz-text-shadow: 1px 0px #333; text-shadow: 1px 0px #333;}

.menu1 {position: relative; z-index: 1;}

.menu1 a {overflow: hidden; color:#fff; text-decoration: none;margin: 5px 10px;}

.menu1 a span {display: block; padding: 12px 20px; background: #00BFFF; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}

.menu1 a:before {position: absolute; top: 0; left: 0; z-index: -1; padding: 12px 20px; background: #FFF; color: #00BFFF; text-decoration: none; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%);}

.menu1 a:hover span, .menu1 a:focus span {-webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%);}

.menu1 a:hover::before, .menu1 a:focus::before {-webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%);} </style>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage