浙江 杭州

基于Bootstrap3的隐藏滑动侧边栏插件

系统分类: 网页特效 - jquery插件 - jQuery树形菜单 2017-03-21

人气54376

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


Bootstrap-off-canvas-push是一款基于Bootstrap3的隐藏滑动侧边栏jQuery插件。该侧边栏插件在大屏幕设备中会显示正常的水平顶部菜单,在移动手机等小屏幕设备中,菜单将转换为隐藏滑动侧边栏。

Bootstrap默认在小屏幕设备上会将菜单隐藏,只显示一个汉堡包按钮。但是隐藏菜单没有滑动推拉的效果。offcanvas.js侧边栏插件可以将Bootstrap的隐藏菜单转换为滑动菜单。

使用方法

使用offcanvas.js侧边栏插件依赖于Bootstrap,需要引入相关的依赖文件。同时还要引入插件本身的offcanvas.min.js和offcanvas.min.css文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/offcanvas.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/offcanvas.min.js"></script>              
              
HTML结构

该Bootstrap隐藏滑动侧边栏插件需要一个空的遮罩层。

<div class="overlay"></div>              
              

该隐藏滑动侧边栏目前只能工作在navbar-static-top类型的菜单上。

<nav class="navbar navbar-inverse navbar-static-top">                
              

汉堡包菜单的data-toggle值要设置为offcanvas。另外要添加pull-left class。

<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="offcanvas" aria-controls="navbar"> 
              

为导航菜单的菜单项添加sidebar-offcanvas class。

<div id="navbar" class="collapse navbar-collapse sidebar-offcanvas"> 
              

在页面主内容部分添加class row-offcanvasrow-offcanvas-left

<div class="row-offcanvas row-offcanvas-left"> 
              

完整的Bootstrap隐藏滑动侧边栏的HTML结构如下:

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="offcanvas">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse sidebar-offcanvas">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
<div class="container">
  <div class="row-offcanvas row-offcanvas-left">
    <!-- 页面内容部分 -->
  </div>
</div>                
              

查看演示
下载资源:31
下载资源
错误提交:

格式:zip 大小:172.49KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1646.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于Bootstrap3的隐藏滑动侧边栏插件

我当前G币余额:0 已下载次数:31

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有12 评论)

1 2