Tutorial - Menu Lateral Deslizante

 

Yoo!

Lembrei agora que uma leitora havia pedido um tutorial de um menu lateral, que ao passar o mouse ele desliza e fica um pouco maior. Ainda não entendeu? Veja abaixo, no gif.

Você pode colocar no lugar dos corações o nome da sua página, como a dona do Capture Dream fez e eu acho que vocês já viram.

Vamos começar?

1. Procure por ]]></b:skin> e acima desse código, cole:

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);

}

Entenda o código:   

position:fixed;

Troque o fixed por absolute se quiser que o menu não role junto com a página.

width:110px;

O menu cortou sua imagem? Aumente esse número para ter uma maior largura.

background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);

Mude para o link da SUA imagem :3

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

2. Agora 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. 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

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?