Manipular divs com show() e animate()

Olá pessoal, sou novo no javascript e não estou conseguindo fazer uma simples animação com uma div e uma nav. Sei que pode ser algo simples de se fazer mas eu não estou conseguindo.

Bom, o problema é o seguinte: Eu tenho uma div do meu HTML com esse ícone de menu: /applications/core/interface/imageproxy/imageproxy.php?img=http://i67.tinypic.com/zjdvlh_th.jpg&key=24d790a60162f95bd5555dac885efd3915656a3e51ad6cd6a9cc6292e6af0b92" alt="zjdvlh_th.jpg" />. O que eu preciso fazer é: Quando clicar nesse ícone, aparecer o menu que tem outros quatro ícones, dentro de uma nav. Eu consigo fazer isso através desse código:

$(document).ready(function(){
 $("#nav_menu").hide();
 $("#icon_menu").click(function(event){
 $("#icon_menu").animate({left: "8%"},700, function(){
 $("#nav_menu").show(700);
 });
 });
});

Eu coloquei o animate para o ícone da div ir um pouco para a direita e os ícones da nav não ficar em cima dele.

O que eu quero fazer é um efeito de slide na nav, pois o efeito do show() não está combinando com o site. Mas quando eu coloco a configuração dentro das propriedades do show, show("slide",{direction:"left"},700); nenhum efeito acontece.

Eu também gostaria de saber como faço para quando clicar novamente no ícone /applications/core/interface/imageproxy/imageproxy.php?img=http://i67.tinypic.com/zjdvlh_th.jpg&key=24d790a60162f95bd5555dac885efd3915656a3e51ad6cd6a9cc6292e6af0b92" alt="zjdvlh_th.jpg" /> o menu fechar.