I've written a script to handle responsive design for smaller devices and display a toggle menu instead of a full-width menu. The current script works, but I find it messy. How can I make this code more minimalistic and efficient?
Is it good practice to use the resetMenu() function to maintain CSS for specific resolutions when resizing the browser from normal to toggle mode?
$(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"});
}
)});