Mam taki oto skrypt - napisany "na kolanie" tak aby działał.
Jest tu mnóstwo nadmiarowości - często wykonywane te same instrukcje ale z innymi parametrami/wartościami.
Myślałem o wrzuceniu tych powtarzających się elementów do jakiejś funkcji, a następnie wywoływanie tej funkcji z odpowiednimi parametrami.
Nie wiem czy to dobry pomysł - może jest jakieś inne rozwiązanie na które nie wpadłem?
$('#hamburger').click(function(){
var th = $(this);
var width = $(window).innerWidth();
var m = 'full';
if(th.toggleClass('expend').hasClass('expend')){
$('.li-separator').css('background', '#fff');
m = 'mobi';
$('#menu').animate({
'width' : 56
}, 150, function(){
th.find('i').attr('class', 'fa fa-bars');
});
$('#content').animate({
'left' : 56,
'width' : (width - 56)+'px'
}, 150, function(){});
}else{
if(width > 1200) {
$('.li-separator').css('background', '#f6f7fa');
m = 'full';
$('#menu').animate({
'width' : 320
}, 150, function(){
th.find('i').attr('class', 'fa fa-long-arrow-left');
});
$('#content').animate({
'left' : 320,
'width' : (width - 320)+'px'
}, 150, function(){});
}else if(width <= 1200 && width >= 500){
$('.li-separator').css('background', '#f6f7fa');
m = 'mobi';
$('#menu').animate({
'width' : 320
}, 150, function(){
th.find('i').attr('class', 'fa fa-long-arrow-left');
});
$('#content').animate({
'left' : 56,
'width' : (width - 56)+'px'
}, 150, function(){});
}else{
$('.li-separator').css('background', '#f6f7fa');
m = 'mobi';
$('#menu').animate({
'width' : '100%'
}, 150, function(){
th.find('i').attr('class', 'fa fa-long-arrow-left');
});
$('#content').animate({
'left' : 56,
'width' : 'calc(100% - 56px)'
}, 150, function(){});
}
}
$.ajax({
type: 'POST',
url: 'handleAjax.php',
data: 'm='+m
});
});
$(window).resize(function(){
var th = $('#hamburger');
var width = $(window).innerWidth();
var menuWidth = $('#menu').width();
$('#content').css({
'left' : menuWidth,
'width' : (width - menuWidth)+'px'
});
});