Para esse tutorial necessita de um pouco de conhecimento com o conteudo!
Obs: Não é Todos Os Templates Que Vão Dar certo
1° colocar antes de ]]></b:skin>
/* Styles for the entire LavaLamp menuExplosionRenders */
.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 ExplosionRenders*/
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item ExplosionRenders. */
.lavaLamp li.back {
background: url("http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/lavalampd.png") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/lavalampd.png") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item ExplosionRenders. */
.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;
}
.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 ExplosionRenders*/
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item ExplosionRenders. */
.lavaLamp li.back {
background: url("http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/lavalampd.png") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/lavalampd.png") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item ExplosionRenders. */
.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;
}
Colocar Antes dE </hEAD>
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20feliphe/jquery-1.2.3.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20feliphe/jquery.lavalamp.min.js' type='text/javascript'/>
<!-- Optional -->
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20feliphe/jquery.easing.min.js' type='text/javascript'/><script type='text/javascript'>
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});</script>
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20feliphe/jquery.lavalamp.min.js' type='text/javascript'/>
<!-- Optional -->
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20feliphe/jquery.easing.min.js' type='text/javascript'/><script type='text/javascript'>
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});</script>
2°
Coloque abaixo de <body> ouu aonde voce quizer deixar o menu (isso necessita um pouco de conhecimento)
<div id='topo-menu'>
<div id='menu'>
<ul>
<li class='back'><div class='left'/></li>
<ul class='lavaLamp'>
<li><a href='/'>Home</a></li>
<li><a href='/'>Parceria</a></li>
<li><a href='/'>Contato</a></li>
<li><a href='/'>Mapa Do Site</a></li>
<li><a href='/'>Pedidos</a></li>
</ul>
<li class='back' style='left: 10px; width: 57px; display: block; overflow: hidden;'><div class='left'/></li></ul></div></div>
Coloque abaixo de <body> ouu aonde voce quizer deixar o menu (isso necessita um pouco de conhecimento)
<div id='topo-menu'>
<div id='menu'>
<ul>
<li class='back'><div class='left'/></li>
<ul class='lavaLamp'>
<li><a href='/'>Home</a></li>
<li><a href='/'>Parceria</a></li>
<li><a href='/'>Contato</a></li>
<li><a href='/'>Mapa Do Site</a></li>
<li><a href='/'>Pedidos</a></li>
</ul>
<li class='back' style='left: 10px; width: 57px; display: block; overflow: hidden;'><div class='left'/></li></ul></div></div>
0 comentários:
Postar um comentário