通过添加类和媒体查询实现侧边导航栏的显示隐藏效果

最新推荐文章于 2021-06-03 05:15:42 发布

qq_36938282

最新推荐文章于 2021-06-03 05:15:42 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/qq_36938282/article/details/54340523

版权

实现效果：

bootstrap中：AdminLTE主页的侧边栏显示隐藏的效果

目的：让页面适用移动端设备

内容：

html结构：

<body>
<div class="wrapper">
<aside class="main-sidebar">//侧面导航栏
<section class="sidebar">
<ul class="sidebar-menu">
<li>
全部文件
</li>
</ul>
</section>
</aside>
<div class="content-wrapper">//右侧主要展示内容

<div class=" icon-btn sr-only" style="background-color:#3c8dbc;padding:10px;">
<i class=" fa fa-fw fa-align-justify" style="font-size:px;color:#fff;"></i>
</div>
<section class="content"> //内容
</section>
</div>
</div>
</body>

js部分：

// 监听浏览器窗口小于767px，左侧导航隐藏，toggle按钮出现
$(window).resize(function(){
if($(document.body).width() < 767){
$('.icon-btn').removeClass('sr-only').addClass('show');
$('li').on('click', function(){ $('body').removeClass('sidebar-open');})
}else{
$('.icon-btn').addClass('sr-only');
}
})

css部分（主要是媒体查询）：

.wrapper {
min-height: 100%;
position: relative;
overflow: hidden;
}

.main-sidebar {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 810;
}

content-wrapper{