11 de ago. de 2012

Menu deslizante (igual o daqui)

Yoo~
Desculpem a desatualização, mais eu fiquei procurando a tinta certa pro meu cabelo e tal! hoje finalmente consegui pintar ele se vocês quiserem ver como ficou, clique aqui *-*
Enfim, trouxe o menu que tem aqui, pois fizeram o request. eu vi o tutorial lá no Kawaii World. :)
Va em seu HTML, e acima de ]]></b:skin cole o codigo, modificando o nescessario:
ul#menusisi {
position:fixed;
margin:0;
padding:0;
top:30px;
left:0;
list-style:none;
z-index:9999;
}
ul#menusisi li {
width:190px;
}
ul#menusisi li a {
display:block;
margin-left:-10px;
width:110px;
height:55px;
background-color:#ded8d8;  /* Cor de fundo do botão */ background-repeat:no-repeat;
background-position:48px center;
border:1px solid #ded8d8;  /* Cor da borda do botão*/
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-khtml-border-top-right-radius: 5px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .home a {
background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);
}
ul#menusisi .pagina1 a {
background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);
}
ul#menusisi .pagina2 a {
background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);
}
ul#menusisi .pagina3 a {
background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);
}
ul#menusisi .pagina4 a {
background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);
}
ul#menusisi .pagina5 a {
background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);
}


Onde esta "http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png" você pode trocar pelo link da imagem que você queira.

Depois,procure por </head> e acima do código cole:
<script src="http://www.google.com/jsapi">
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);
$(&#39;#menusisi &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200);
}
);
});
</script> 

Atenção: Visualize e veja se deu tudo certo. Um código de erro apareceu? Coloque OUTRO </script> abaixo do último. 
Salve o HTML. adicione em uim gadget de HTML/java script e cole:

<ul id='menusisi'>
<li class='home'><a href='link do seu blog' title='Home'/></li>
<li class='pagina1'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina2'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina3'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina4'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina5'><a href='link da pagina' title='Titulo'/></li>
</ul>
Pronto! Caso nao entendam, comentem ~

3 comentários :

  1. waah, consegui >< eu tinha tentado fazer esse tutorial com o do Kawaii World, mas ficava dando um erro Ç^Ç (e não era por causa do script)
    eu fui tentar o daqui e funcionou *OOO* arigatou >.<

    kissus <3
    http://queenofanimes.blogspot.com.br/

    ResponderExcluir
  2. Ai, perfeito *-*
    Teu cabelo ficou divo ^-^
    Procurei esse tuto em tudo, e não achei >.<
    Beijs, s2rita.blogspot.com

    ResponderExcluir
  3. Oi lindaa! aah que bom que você postou esse tuto, procurei em tudo que é site e não achei! Mas quando eu fui fazer no meu blog de teste não deu certo :(
    tava tudo indo bem dai quando eu adicionei o gagdet HTML não apareceu do lado! Só ficou no gagdet aqueles pontinhos de lista de links :'( Me Ajuda pf?

    queria muuuito esse efeito no menu!!

    bjooo millah ^^

    sweetkprincess.blogspot.com

    ResponderExcluir

Sem chingamentos porfavor ;)
Todos os comentários serão respondidos.