Bom dia ae
Postando mais um tutorial de JQuery com um menu lateral com slider que fica sobreposto ao conteúdo com slider para esconder e mostrar a caixa do menu.
Segue o código simples
$(function(){
$(“#botao”).click(function(){ //Evento de quando o usuário clica para mostrar ou esconder o menu
if (this.state != ’1′){ //Crivo de quando o menu esconde ou aparece
$(“#menu”).animate({“left”:”0px”},700); //Animação para o menu aparecer
$(“#botao”).animate({“left”:”120px”},700); //Animação para o botão seguir o menu
this.state=’1′; //Mudança do estado no próximo clique no botão ele ficará escondido
$(this).html(‘<img src=”imgs/seta_esq.gif” />’); //mudança da imagem do botão no caso uma seta agora para a esquerda
}else{ //O “se não” do crivo que agora irá esconder o menu
$(“#menu”).animate({“left”:”-129px”},700); //Animação para o menu ficar escondido
$(“#botao”).animate({“left”:”0px”},700);//Animação para o botãoficar no canto da tela
this.state=’0′; //Mudança do estado no próximo clique no botão ele aparecerá
$(this).html(‘<img src=”imgs/seta_dir.gif” />’);//mudança da imagem do botão no caso uma seta agora para a direita
}//Fechamento do crivo
});//Fechamento do evento
});
O html deste menu
<div id=’menu’>//Div agregadora do menu
<div id=’conteudo_menu’>//Div onde fica o conteudo do menu para poder dar um padding essas coisas
…
</div>//Fecha a div
<div id=’botao’><img src=’imgs/seta_dir.gif’ /></div>//Div onde fica o botão
</div>
O css deste Menu
a Id do botão
#botao{
margin:180px 0 0 129px;
width:38px;
height:41px;
float:left;
cursor:pointer;
}
A Id do menu
#menu{
width:180px;
height:395px;
position:absolute;
left:-129px;
margin:0;
top:30px;
background:url(../imgs/menu.gif) no-repeat left;
}
Bom é isso espero que seja útil
Até!
