patternjavascriptMinor
Responsive Navigation
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:
Other than that, i don't see anything to optimize.
$(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.