0

Eu tenho uma Div, estou construindo um Menu Personalizado, no estilo Responsivo. Gostaria de fazer com que ela surgisse um com animação, vindo do lado Esquerdo. A Div contém os links do Menu e um botão para fechar dentro. Vejam o código que eu tenho até agora:

<script type="text/javascript" src="http://hugovales.esy.es/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(e) {
		$('.open-menu').click(function(e){
			e.preventDefault();
			var url = $(this).attr('href')
			$('#menu').fadeIn(500);	
		});
		
		
		$('#menu, .close-menu').click(function(e){
			if( e.target !== this ) 
       			return;
			$('#menu').fadeOut(500);	
		});
		
		
		
    });
</script>
<div id="menu" style="background-color: rgba(0, 0, 0, 0.9); position:fixed; top:0; left:0; width:100%; height:100%; display:none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
<div id="mymenu" style="background-color: #fff; height: 100%; width: 20%; position: fixed; left: 0pt; top: 0pt; box-shadow: 10px -9px 3px rgba(0, 0, 0, 0.24);"><img class="close-menu" style="margin-left: 220px; margin-top: 10px;" src="http://hugovales.esy.es/css-alternative/bb083d7b27e4e2fd8e7f50c623582d10_30x40.png"></div></div>
<div class="open-menu">Open Menu</div>

Esse menu pode ser visto aqui, no meu site.

Vocês podem ver ali o texto "Open Menu" (No Cabeçalho, Perto do Ícone do Facebook)

O Que eu quero é que ele surja com uma animação, pelo lado esquerdo. Tem como fazer essa Div (mymenu) aparecer assim? (Seja lá com CSS ou algum Script)

Obrigado á quem se dispôr á responder. Ajuda Muito Mesmo!

2 Respostas 2

1

Use a propriedade Transition:

<div id="mymenu" style="transition: 2s ...">

2s é o tanto de segundos que durará a animação. Você também pode especificar a transition para uma propriedade específica:

transition: margin 2s;
3
  • Isso significa que a Div vem da esqueda como eu queria? 23/05/2015 às 2:16
  • A propriedade transition anima "qualquer coisa" do html. Sim, também se aplica a esse caso. 23/05/2015 às 2:30
  • Eu Não consegui moço. 23/05/2015 às 17:06
0

Para animar o menu no momento que o evento de click é acionado, você pode utilizar o método .animate do jQuery.

Para saber mais recomendo que você veja a documentação: http://api.jquery.com/animate/

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .