http://3.bp.blogspot.com/-Vyqnu4Duzt8/Tf-FphS7mwI/AAAAAAAAAQs/DXM_IWyzQTI/s220/20110609155743_drumdrigo_6P8WUJ3SLAQBFE2Y0MKT1HX9NCVR75DZGO4I.jpg

Pedido - Como adicionar menu LavaLamp no blog

Driigo
Para esse tutorial necessita de um pouco de conhecimento.
Não é em todos os templates que vai dar certo.
Código 1 coloca 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://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. */
        .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;
}

Código 2 coloca antes de </head>

<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/jquery-1.2.3.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/jquery.lavalamp.min.js' type='text/javascript'/>
<!-- Optional -->
<script src='http://dl.dropbox.com/u/32586820/Lava%20Lamp%20by%20Driigo/jquery.easing.min.js' type='text/javascript'/><script type='text/javascript'>

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


Código 3


Coloque abaixo de <body>  ouu aonde se 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>

Boa sorte!
 
Sem Comentários

0 comentários:

Postar um comentário

Assinar: Postar comentários