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!