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 相关文章推荐
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
webpack v4 从dev到prd的方法
Apr 02 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
vue实现移动端div拖动效果
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
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
简单谈谈Python中的闭包
2016/11/30 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python匿名函数用法实例分析
2019/08/03 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
网络维护中文求职信
2014/01/03 职场文书
卖车协议书
2014/04/21 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
七年级语文教学反思
2016/03/03 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
postgresql中如何执行sql文件
2023/05/08 PostgreSQL