bootstrap自定义样式之bootstrap实现侧边导航栏功能
|
bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单，参考了很多官网的侧滑，实现方法各有不同，优缺点也十分明显，有的官网首页为了仅仅实现一个侧滑的效果，用了owl.carousel滑屏的插件，个人觉得小题大做了。这个bootstrap侧滑菜单更专业的名字叫做手机导航栏。我也比较这个名字，更符合bootstrap的特性。所以我这篇文章介绍的更容易的一种做法，新手更容易接受。 bootstrap侧边导航栏实现原理1.侧滑栏使用定位fixed 2.使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 3.侧滑栏的侧滑效果不使用jquery方法来实现，使用的是css3 transforms属性进行div的移动，侧滑的动画效果使用的是css属性transition 4.缺点：使用两套菜单，一套是pc端屏幕显示的菜单，一套是移动端显示的手机导航菜单，这个缺点比较明显，生成无关的标签，优点代码少，简单容易接受 效果图
bootstrap侧边导航栏 一个导航栏的布局，用了两个导航菜单，一个是pc端的，一个是手机端，利用bootstrap响应式使用工具类visible-xs visible-sm来实现pc端隐藏切换按钮； visible-lg visible-md 实现了pc端显示导航栏；visible-xs visible-sm实现手机端显示手机导航栏。 bootstrap响应式工具类详见：https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html css实现布局和侧滑效果（侧滑的关键css3属性transform、transition） 代码不多，仅仅10行 要值得注意的是css3的两个属性： transform：旋转div，支持元素2D或3D旋转，属性值translateX（X）就是在X轴上移动Xpx的距离 http://www.w3school.com.cn/cssref/pr_transform.asp 而侧滑的动画效果是使用transition属性，设置属性的过渡动画的效果，语法 transition: property duration timing-function delay; http://www.w3school.com.cn/cssref/pr_transition.asp 单击事件切换侧滑 总结不推荐用两个菜单导航栏，缺点很明显，为了实现效果而已，不要介意，其实用一个菜单导航栏也是可以实现，试试media 完全可以实现。 代码下载地址： 以上所述是小编给大家介绍的bootstrap自定义样式之bootstrap实现侧边导航栏功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
