Tutorial:
http://things-to-help-you.com/post/19633469056
Preview:
http://things-to-help-you.com/menu-fofinho
Este menu é bem chatinho. A Débs me mandou o site em inglês e me pediu para fazer, porque o js é bem complicado e o site só diz onde cada coisinha deve ser colocada, é.
Primeiro tu tem que por o arquivo javascript antes de </head>, porque é isso que faz o menu funcionar.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/8yo5xxv/AEwm171ey/jquery.lettering.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/8yo5xxv/rejm171fx/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/8yo5xxv/2rOm171gi/jquery.hoverwords.js"></script>
Em seguida, você precisa por outro código antes de </head> também, e esse código é o que define a velocidade com que o efeito vai surgir e tudo mais.
<script type="text/javascript">
$(window).load(function(){
$('#sl_menu').find('li:not(:last) > a')
.hoverwords({ overlay:true })
.end()
.find('li:last > a')
.hoverwords({ overlay:true , dir:'rightleft' });
$('#example1').hoverwords({ delay:50 });
$('#example2').hoverwords();
$('#example3').hoverwords();
$('#example4').hoverwords({ overlay:true});
$('#example5').hoverwords({ delay:60 });
});
</script>
Depois disso vem o css, e daí você personaliza como quiser. Só colocar o código antes de </style>:
/* --- Menu ------ */
.sl_menu{margin: 20px 0px 0px 0px; list-style:none; position: absolute; cursor: pointer;}
.sl_menu li,.sl_examples{float:left; font-family: 'Yanone Kaffeesatz', arial, serif; font-size: 27px; color: #b183a5; text-transform:uppercase; display: inline-block; padding: 4px; line-height: 40px;}
.sl_menu a,.sl_examples a{display:block; position:relative; float:left; color: #ffffff;}
.sl_menu a > span,.sl_examples a > span{height: 40px; float:left; position:relative; overflow:hidden;}
.sl_menu a span span,.sl_examples a span span{position:absolute; display: block; left: 0px;
top: 0px; text-align:center;}
.sl_menu a span span.sl-w1,.sl_examples a span span.sl-w1{text-shadow: 0px 2px 0px #;
text-align: center; color: #ffffff; z-index:2; background: url('http://static.tumblr.com/8yo5xxv/I67m171ns/bg-menu.png');} /* Cor do link normal */
.sl_menu a span span.sl-w2{color: #b07877; z-index:3; text-shadow: 0px 2px 0px #ffffff;} /* Cor do link hover */
Daí pra fazer o menu, só colocar dentro do seu html aonde quiser que apareça:
<ul id="sl_menu" class="sl_menu">
<li><a href="/"> ... </a></li>
<li><a href="/"> ... </a></li>
<li><a href="/"> ... </a></li>
</ul>
Pronto n_n
0 comentários: