26 de jul de 2011

Como inserir um menu LavaLamp em seu blog!

Olá pessoal! Hoje estarei a ensinar como colocar um Menu que a algum tempo eu estava a procurar e  assim que encontrei, tratei logo de compartilhar com vocês. Esse Menu Horizontal foi desenvolvido pela gmarwaha.com e é chamado de Lava Lamp. Vamos lá:

Antes de qualquer alteração em seu template, faça um backup

Coloque o código abaixo antes de ]]></b:skin>

/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 0px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 72px; margin: -40px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("http://perfeitodownload.webs.com/PERFEITO%20DOWNS%20IMG/lavalampd.png") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("http://perfeitodownload.webs.com/PERFEITO%20DOWNS%20IMG/lavalampd.png") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
font: bold 12px tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #fff;
outline: center;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
padding:5px 13px 0px 0px;
margin:3px 0px 0px 15px;
}


Agora vamos para o script coloque ele antes de </head>

<script src='https://dl.dropbox.com/u/8526013/jquery-1.2.3.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/8526013/jquery.lavalamp.min.js' type='text/javascript'/>
<!-- Optional -->
<script src='https://dl.dropbox.com/u/8526013/jquery.easing.min.js' type='text/javascript'/><script type='text/javascript'>

$(function() { $(&quot;.lavaLamp&quot;).lavaLamp({ fx: &quot;backout&quot;, speed: 700 })});</script>

Coloque abaixo de <body> ou onde quiser deixar o menu

Caso de erro apague essa palavra <div id='topo-menu'>

<div id='topo-menu'>
<div id='menu'>
<ul>
<li class='back'><div class='left'/></li>
<ul class='lavaLamp'>
<li><a href='http://perfeitodowns.blogspot.com/'>Home</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/07/termos-de-parceria-nos-do-perfeito.html'>Parceria</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/07/fale-conosco.html'>Contato</a></li>
<li><a href='http://perfeitodowns.blogspot.com/p/mapa-do-site.html'>Mapa Do Site</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/11/pedido.html'>Pedidos</a></li>
</ul>
<li class='back' style='left: 10px; width: 57px; display: block; overflow: hidden;'><div class='left'/></li></ul>

Valeu galera até o próximo!!
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

1 comentários

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo