使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。

为什么80%的码农都做不了架构师？>>>

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

思路概要：

使用.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

使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。相关推荐

商城左侧菜单栏网页模板
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 哈哈哈直接上代码趴 ...
WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）
WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 原文:WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 1.简介上一篇咱们说到, ...
JavaScript之jQuery够用即可（jQuery的引入、查找选择器、左侧菜单栏）
文章目录一.写在前面二.jQuery的引入二.各种查找选择器四.实例之左侧菜单栏一.写在前面 JQuery世界上使用最广泛的一个库,它是一个轻量级的库,文件大小只有几十k,但是功能却相当强大 ...
Android仿人人客户端（v5.7.1）——点击左侧菜单栏中的Item切换视图
转载请标明出处:http://blog.csdn.net/android_ls/article/details/8765193 在前面几讲中,左侧菜单(左侧面板).满足滑动或点击子View的方式,打开 ...
左侧菜单栏左滑收起展开效果
上一篇文章左侧菜单栏折叠展开效果-超级简单介绍了将菜单列表上下展开的效果,这里在上一篇文章的基础上增加了左右折叠展开,有时候左侧菜单可能占了屏幕的一部分宽度,我们想把左侧菜单栏收缩起来以此让右边可视 ...
Ubuntu进入桌面后，左侧菜单栏和窗口菜单栏不见了的解决方法
症状: ubuntu桌面的左侧菜单栏不见了,如果打开终端,最大化.最小化.关闭按钮也不见了,而且不能移动命令行终端. 解决办法: dconfig reset -f /org/compiz setsi ...
vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换
layout-------------模板包含菜单栏等主要框架 router--------------路由管理,根据路由可生成左侧菜单栏 /** When your routing table is ...
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
背景:在对项目进行bug走查的时候,测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新,当时我真的懵了,vue项目了router还能在当前页面进行再次刷新!!!我怀着疑惑上网查询.咨询足足使用了 ...
后台管理左侧菜单栏图标设置
通过更改菜单项模板(template)中的i标签的类名,可以将左侧菜单栏的图标进行设置,我们需要在项目中使用第三方字体图标在数据中添加一个iconsObj: //template中: <i : ...

使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。

使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。相关推荐

最新文章

热门文章