大家好，又见面了，我是你们的朋友全栈君。
这个记录算是这段时间的一个总结吧。折腾了页面样式果然让人反复纠结。
思路概要：
- 使用.body-small，代表屏幕处于小分辨率下。用JQ的resize()方法监听。并在<body>处增加或删除。
- 使用.mini-sidebar，代表侧边栏处于收缩状态下。（ .body-small 和 .mini-sidebar同时存在时，代表小分辨率下菜单收缩）
- 开始干活，根据<body>标签的class类，编写每个状态下对应的CSS样式。
HTML：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="/static/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/vendors/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="/static/vendors/animate/animate.css" rel="stylesheet">
<link href="/static/vendors/metismenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="/static/assets/home/test_css.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon_d87cd2a.ico">
</head>
<body>
<div class="container-fluid p-0 m-0 h-100">
<nav id="home_sidebar" class="">
<div class="sidebar-wrapper">
</div>
</nav>
<div id="home_body" class="">
<div id="home_header" class=""><i class="fa fa-indent" id="sidebarToggle">侧边栏开关</i></div>
<div id="home_content" class="">
home_content
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
home_content
</div>
<div id="home_footer" class="">home_footer</div>
</div>
</div>
<script src="/static/vendors/jquery/dist/jquery.min.js"></script>
<script src="/static/vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendors/metismenu/dist/metisMenu.min.js"></script>
<script src="/static/vendors/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/static/assets/home/test_js.js"></script>
</body>
</html>
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;}
转载于:https://my.oschina.net/asktao/blog/3002320
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/107053.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...