domingo, 25 de março de 2012

Menu Revert

Olá! Voltei com um tutorial de menu lindo! Perfeito gente! Para visualizar clique aqui! Créditos para TTHY! Deu uma olhada como é? O que acharam? Eu achei mega perfeito *u* Obs: evite colocar o menu em algum lugar que o fundo seja branco, não recomendo.
Continuem lendo para ver esse tutorial.

1. Primeiramente vá no Modelo>>>Editar Html e aperte CTRL + F e procure por </head> .
2. Antes de </head> coloque esses códigos:
<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>
<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>
3.Agora antes de ]]></b:skin> cole esse código :
/* --- 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 */
4.Personalize como quiser, e por último escolha um lugar para colocar o menu e coloque:
<ul id="sl_menu" class="sl_menu"><li>
<a href="/"> ... </a></li>
<li><a href="/"> ... </a></li>
<li><a href="/"> ... </a></li></ul>
Pronto! Beijos ;*

2 comentários:

*u* Escreva uma comentário? Pleease