Responsive Navigation

Question

The following responsive navigation on JSfiddle works well, however I am just wondering whether there is any way to improve what I have done. I am new at JQuery so all help appreciated: JSFiddle here

$(document).ready(function () {
 $(".menu").click(function () {
 $('#menu').animate({
 'left': '0px'
 });
 });
 $("#close").click(function () {
 $('#menu').animate({
 'left': '-100px'
 });
 });
 $(".menu").click(function () {
 $('#container').animate({
 'left': '100px'
 });
 });
 $("#close").click(function () {
 $('#container').animate({
 'left': '0px'
 });
 });
});

Answer 1

Instead of attaching multiple click handlers for the same element, you should just combine them into one function:

$(document).ready(function () {
 $(".menu").click(function () {
 $('#menu').animate({
 'left': '0px'
 });
 $('#container').animate({
 'left': '100px'
 });
 });
 $("#close").click(function () {
 $('#menu').animate({
 'left': '-100px'
 });
 $('#container').animate({
 'left': '0px'
 });
 });
});

Other than that, i don't see anything to optimize.