Question

I created a little script to handle responsive design for for lower resolution devices and to show a toggle menu instead of a full width menu.
The following script is working fine for me but this looks little bit messy to me. What shorthands or practices should I need to make this code more minimalistic and efficient?

The resetMenu() function is handling to retain CSS for particular resolution while browser resizes from normal mode to toggle mode, is it a good practice to do so?

$(document).ready(function($) {
function resetMenu() {
    $('#top-menu li, #search-form, .social').css({"display":"block"});
    $('#top-menu li').css({"display":"inline-block"});
};
$(window).resize(function () { 
if($(window).width() > 640){
    $(resetMenu());
}
else{
    $('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000);
    $('#top-menu li:nth-child(2)').css({"display":"none"});
}
});

$(".togglebutton").toggle(
function () {
    if($(window).height() < 360){
        $('#top-menu li').css({"display":"inline-block"}).fadeIn(500);
        $('#top-menu li:nth-child(2)').css({"display":"none"});
        $('#search-form, .social').css({"display":"block"}).fadeIn(500);
        $('#top-menu li').css({"border":"none"});
    }
    else{
        $('#top-menu li, #search-form, .social').css({"display":"block"}).fadeIn(1000);
        $('#top-menu li:nth-child(2)').css({"display":"none"});
    }
},
function () {
    $('#top-menu li, #search-form, .social').css({"display":"none"}).fadeOut(1000);
    $('#top-menu li:nth-child(2)').css({"display":"none"});
}

)});

Answer 1

I normally prefer code which has the declaration and execution parts on different modules so, one part would be:

var one = $('#top-menu li')
var two = $('#top-menu li, #search-form, .social');
var three = $('#top-menu li:nth-child(2)');
var four = $('#search-form, .social')

function toggleIn() {
    if($(window).height() < 360){
        one.css({"display":"inline-block"}).fadeIn(500);
        three.css({"display":"none"});
        four.css({"display":"block"}).fadeIn(500);
        one.css({"border":"none"});
    }
    else{
        two.css({"display":"block"}).fadeIn(1000);
        three.css({"display":"none"});
    }
},

function toggleOut() {
    two.css({"display":"none"}).fadeOut(1000);
    three.css({"display":"none"});
}

function resetMenu() {
    one.css({"display":"block"});
    two.css({"display":"inline-block"});
};

And the other just:

$(window).resize(function () { 
    if($(window).width() > 640){
        $(resetMenu());
    }
    else{
        two.css({"display":"none"}).fadeOut(1000);
        three.css({"display":"none"});
    }
});

 $(".togglebutton").toggle(toggleIn, toggleOut);

So, how I see it, that second part would be your “minimalistic” code. And each functional part of the code can be separately evaluated, useful for debbugin purposes.