这个记录算是这段时间的一个总结吧。折腾了页面样式果然让人反复纠结。
思路概要:
使用.body-small,代表屏幕处于小分辨率下。用JQ的resize()方法监听。并在
处增加或删除。使用.mini-sidebar,代表侧边栏处于收缩状态下。( .body-small 和 .mini-sidebar同时存在时,代表小分辨率下菜单收缩)
开始干活,根据
标签的class类,编写每个状态下对应的CSS样式。HTML:
Titlehome_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 () {
/**
* 初始化页面样式
* 注册resize监听,判断浏览器宽度,调整页面样式。
* */
$(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;}
/* 当浏览器变窄,并且菜单是关闭状态时(存在mini-sidebar时)*/
body.body-small.mini-sidebar #home_body{margin-left:0;}
body.body-small.mini-sidebar #home_sidebar{width:0;}