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 计算当天是本年本月的第几周
Mar 22 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue router 配置路由的方法
Jul 26 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
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添加MySQL数据记录代码
2008/06/07 PHP
php mail to 配置详解
2014/01/16 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
python实现简单爬虫功能的示例
2016/10/24 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python爬虫容易学吗
2020/06/02 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
如何写一个自定义标签
2012/12/28 面试题
中学教师培训制度
2014/01/31 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
英语教师自荐信
2014/05/26 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
道歉短信大全
2015/05/12 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
python中validators库的使用方法详解
2022/09/23 Python