您的位置：首页 > 其它

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

2017-01-11 09:22 423 查看

实现效果：

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{

min-height: 100%;

z-index: 800;
margin-left：230px;

}

@media (max-width: 767px) {

.main-sidebar,

{

-webkit-transform: translate(-230px, 0);

-ms-transform: translate(-230px, 0);

-o-transform: translate(-230px, 0);

transform: translate(-230px, 0);

}

}

@media (max-width: 767px) {

.sidebar-open .main-sidebar,

{

-webkit-transform: translate(0, 0);

-ms-transform: translate(0, 0);

-o-transform: translate(0, 0);

transform: translate(0, 0);

}

}

@media (max-width: 767px)

.content-wrapper {

margin-left: 0;

}

@media (max-width: 767px)

.sidebar-open .content-wrapper {

transform: translate(230px,
0);

}

描述：刚开始给wrapper 盒子设置 position: relative;，.main-sidebar设置 position: absolute;和定宽及content-wrappe设置左外边距230px;

当媒体查询max-width: 767px，main-sidebar移动到到坐标0（此时切换按钮出现，见js）

当点击按钮：给body添加类sidebar-open，然后就会媒体查询侧边栏坐标会回到230位置，且sidebar-open下的content-wrapper会右移动230;

再次点击，移除body添加的类sidebar-open,样式回到恢复到没有类sidebar-open状态

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航