Olá pessoal, tudo bem?
como vocês estão?
É mais um post de um menu, que eu vi perdido por ai! e eu achei no backup do kawaii world, aquele da epoca, em tretas e confuções junto com plágio, bla bla bla, sinto falta dessa epoca, eu fiquei com medo de perde a conta do blog, vocês acreditam? deu muito medo... entao vou dar aos créditos no kawaii world e no capture dream, são eles que tem ou ainda existe esse menu, no blog do capture dream...enfim vamos começar? é um post bem curtinho, ainda mais na epoca de frio, de 9 graus, aqui em São Paulo, em uma pandemia dessa? enfim, vamos la?
primeiro apresentamos na imagem aqui em baixo como é o menu
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);
}
Agora procure <head> E coloque em cima dele este código aqui:
<script src="http://www.google.com/jsapi">
<script>
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>
Atenção: Visualize e veja se deu tudo certo. Um código de erro apareceu? Coloque OUTRO </script> abaixo do último.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
3. Salve. Mas como usar o menu? Adicione um gadget de HTML/Javascript lá ná área de editar HTML 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>
Mude apenas o link da página e o título.
Gostaram, dúvidas?
Nenhum comentário:
Postar um comentário