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.