这个记录算是这段时间的一个总结吧。折腾了页面样式果然让人反复纠结。

思路概要：

使用.body-small，代表屏幕处于小分辨率下。用JQ的resize()方法监听。并在

使用.mini-sidebar，代表侧边栏处于收缩状态下。( .body-small 和 .mini-sidebar同时存在时，代表小分辨率下菜单收缩)

开始干活，根据

HTML：

home_content

home_content

JavaScript:

var test_html = function (){

function BeautifyMenu() {

$('#home_sidebar>div').hide();

setTimeout(

function () {

$('#home_sidebar>div').fadeIn(400);

}, 100);

}

var initSidebarToggle = function () {

$("#sidebarToggle").click(function (e) {

//动画效果 animate 有空再添加。

e.preventDefault();

$("body").toggleClass("mini-sidebar");

BeautifyMenu();

})

};

var initResizeWindows = function () {

$(window).resize(function () {

if ($(window).width() < 769) {

$('body').addClass('body-small mini-sidebar');

} else {

$('body').removeClass('body-small');

}

});

$(window).resize();

};

return {

init:function () {

initSidebarToggle();

initResizeWindows();

}

}

}();

$(document).ready(function () {

test_html.init();

});

CSS:

html,body{margin:0;padding:0;height:100%}

body{font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;background-color: #2f4050;color: #676a6c;overflow-x: hidden;}

#home_sidebar,#home_body,#home_header,#home_footer,#sidebar_menu>li.mm-active,.sidebar-header{ -webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;}

#home_header{width:100%;background-color: #f3f3f4;position:fixed;height: 50px;line-height: 50px;border-bottom:1px solid #e7eaec;}

#home_sidebar{width:220px;position:fixed;height:100%;overflow-x: hidden;}

#home_body{margin-left: 220px;height:100%}

#home_content{height:auto;padding-top:50px;padding-bottom:40px;background: #f3f3f4}

#home_footer{margin-top: -40px;background: #ffffff;height: 40px;line-height:40px;}

body.mini-sidebar #home_body{margin-left:70px;}

body.mini-sidebar #home_sidebar{width:70px;}

body.body-small.mini-sidebar #home_body{margin-left:0;}

body.body-small.mini-sidebar #home_sidebar{width:0;}