HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Responsive Navigation

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
responsivenavigationstackoverflow

Problem

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'
        });
    });
});

Solution

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.

Code Snippets

$(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'
        });
    });
});

Context

StackExchange Code Review Q#70811, answer score: 2

Revisions (0)

No revisions yet.