bootstrap自定义样式之bootstrap实现侧边导航栏功能


Posted in Javascript onSeptember 10, 2018

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自定义样式之bootstrap实现侧边导航栏功能 

bootstrap自定义样式之bootstrap实现侧边导航栏功能

bootstrap侧边导航栏

bootstrap导航栏布局
  <!--手机导航栏-->
  <div id="mobile-menu" class="mobile-nav visible-xs visible-sm">
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >SVN</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >iOS</a></li>
    </ul>
  </div>
  <!--pc导航栏-->
  <nav class="navbar-inverse visible-lg visible-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >菜鸟教程</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >iOS</a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >SVN</a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Java</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!--手机导航栏侧滑-->
  <div class="nav-btn visible-xs visible-sm">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="mobile-nav-taggle" id="mobile-nav-taggle">
      <span class="glyphicon glyphicon-align-justify"></span>
    </a>
  </div>

一个导航栏的布局,用了两个导航菜单,一个是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行 

* {margin:0;padding:0;}
     #mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;}
     a:hover ,a:focus{text-decoration:none}
    .mobile-nav ul li a {color:gray;display:block;padding:1em 5%;  border-top:1px solid #4f4f4f;border-bottom:1px solid #292929;transition:all 0.2s ease-out;cursor:pointer;#mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;transition:all 0.3s ease-in;}}
    .mobile-nav ul li a:hover {background-color: #23A1F6;color: #ffffff;}
    .show-nav {transform:translateX(0);}
    .hide-nav {transform:translateX(-220px);} /*侧滑关键*/
    .mobile-nav-taggle {height:35px;line-height:35px;width:35px;background-color:#23A1F6;color:#ffffff;display:inline-block;text-align:center;cursor:pointer}
    .nav.avbar-inverse{position:relative;}
    .nav-btn {position:absolute;right:20px;top:20px;}

要值得注意的是css3的两个属性:

transform:旋转div,支持元素2D或3D旋转,属性值translateX(X)就是在X轴上移动Xpx的距离

以上所述是小编给大家介绍的bootstrap自定义样式之bootstrap实现侧边导航栏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue弹窗组件的实现示例代码
Sep 10 #Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 #Javascript
vue插件实现v-model功能
Sep 10 #Javascript
在Angular中使用JWT认证方法示例
Sep 10 #Javascript
详解vue-router传参的两种方式
Sep 10 #Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 #Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 #Javascript
You might like
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
python3图片转换二进制存入mysql
2013/12/06 Python
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python实现录音小程序
2020/10/26 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
python 模块导入问题汇总
2021/02/01 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Delphi CS笔试题
2014/01/04 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
会计入职心得体会
2016/01/22 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
浅谈Redis中的RDB快照
2021/06/29 Redis
vue实现滑动解锁功能
2022/03/03 Vue.js
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
关于mysql中string和number的转换问题
2022/06/14 MySQL