超酷Bootstrap 3 隐藏滑动侧边栏菜单

所属分类:导航-垂直导航

 156191  541  查看评论 (19)
分享到微信朋友圈
X
超酷Bootstrap 3 隐藏滑动侧边栏菜单 ie兼容10

Bootstrap3侧边栏菜单

这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果,整体效果非常炫酷。

使用方法

在页面中引入bootstrap的相关文件,以及侧边栏菜单的样式文件style.css文件。

<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='css/style.css'>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

 HTML结构

侧边栏的HTML结构如下:

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
  <ul class="nav sidebar-nav">
    <li class="sidebar-brand"> <a href="#"> Bootstrap 3 </a> </li>
    <li> <a href="#"> <i class="fa fa-fw fa-home"> </i> Home </a> </li>
    <li> <a href="#"> <i class="fa fa-fw fa-folder"> </i> Page one </a> </li>
    <li> <a href="#"> <i class="fa fa-fw fa-file-o"> </i> Second page </a> </li>
    <li> <a href="#"> <i class="fa fa-fw fa-cog"> </i> Third page </a> </li>
    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-fw fa-plus"> </i> Dropdown <span class="caret"> </span> </a>
      <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header"> Dropdown heading </li>
        <li> <a href="#"> Action </a> </li>
        <li> <a href="#"> Another action </a> </li>
        <li> <a href="#"> Something else here </a> </li>
        <li> <a href="#"> Separated link </a> </li>
        <li> <a href="#"> One more separated link </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-fw fa-bank"> </i> Page four </a> </li>
    <li> <a href="#"> <i class="fa fa-fw fa-dropbox"> </i> Page 5 </a> </li>
    <li> <a href="#"> <i class="fa fa-fw fa-twitter"> </i> Last page </a> </li>
  </ul>
</nav>

 初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来为汉堡包按钮添加相应的交互事件,以及为侧边栏的打开和关闭添加和移除相应的class类。

$(document).ready(function() {
    var trigger = $('.hamburger'),
        overlay = $('.overlay'),
        isClosed = false;
    trigger.click(function() {
        hamburger_cross();
    });
    function hamburger_cross() {
        if (isClosed == true) {
            overlay.hide();
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
        } else {
            overlay.show();
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
        }
    }
    $('[data-toggle="offcanvas"]').click(function() {
        $('#wrapper').toggleClass('toggled');
    });
});
相关插件-垂直导航

jquery左侧导航滑动网页定位效果

jquery左侧导航滑动网页定位效果
  垂直导航
 80411  548

手机端jQuery响应式菜单栏

手机端响应式菜单栏,请把浏览器宽度调整到640像素查看效果
  垂直导航
 52628  381

jQuery旅游网站导航

简单的旅游网站导航,加入了ie6对png的支持
  垂直导航
 32443  364

jQuery条件锚点导航

自动定位锚点导航
  垂直导航
 41003  372

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    xiaobeixin 0
    2019/5/4 21:04:34
    请问在哪里改背景颜色,紫色太骚了。。。。 回复
    Sunziyue 0
    2019/3/20 15:34:39
    也可应用到Angular2以上的版本中吗? 回复
    one two 0
    2018/10/26 15:01:10
    怎么让他放到右边去呀,点击之后从右边划出来 回复
    Remex 0
    2018/7/6 17:37:41
    手机显示的时候有个bug,菜单展示的时候整个页面居然可以拖动 = =
        Remex0
        2018/7/9 15:39:20

        自己找到解决方法了  加上这个  

        <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
        未来有你131406220
        2019/8/13 13:56:37
        你好,我想问一下你的左右滑动栏是怎么实现的
    回复
    、淡? 0
    2018/6/22 17:54:49
    在手机页面点击的时候,导航栏 按钮 三 点击后不会回到原处
        公民晓峰0
        2018/7/12 16:03:08
        我跟你遇到了相同的问题
    回复
    洛影 0
    2018/5/14 23:11:04
    请问,导航栏放开的时候,右边的页面是灰的,失效了,不可以做操作,怎么解决这个问题呢 回复
    陆利利-回声网络 0
    2018/2/4 20:06:57

    楼主楼主,ios上三明治导航不兼容啊。。。怎么解决  求解答

    回复
    落叶 0
    2018/1/8 11:20:05

    请问一下,这个模板怎么做三级菜单呢?

    回复
    pinkie 0
    2017/12/28 10:01:23

    感谢感谢!!找了很久这种效果!

    回复
    _Bjergsen 0
    2017/8/21 9:56:36

    交互事件的代码要加在哪里?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复