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

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

 6003  35  查看评论 (3)
超酷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');
    });
});

相关插件-垂直导航

垂直手风琴折叠导航

垂直手风琴折叠导航
  垂直导航
 20689  139

jquery淘宝电器左侧分类菜单

jquery淘宝电器左侧分类菜单,简单的导航悬停展示
  垂直导航
 11638  79

有动画效果的菜单切换

纯手打,兼容jquery和zepto,用于网站动态切换菜单项,支持多级两种动画效果(学习自制)
  垂直导航
 17726  72

创建全屏的网页快速而简单

创建全屏的网页快速而简单 一个简单和易于使用的插件来创建全屏滚动的网站(也称为单页网站)。它允许创建全屏滚动的网站,以及加入该网站的部分里面的一些景观滑块。
  垂直导航
 16527  107

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    G探险者 0
    2017/4/7 17:46:54

    可以通过权限控制来动态展现不同的菜单吗

    回复
    Waikam 0
    2017/4/1 10:51:44

    点击下拉组的内容的时候回收起来怎么解决啊?

    回复
    yBoy 0
    2017/3/16 11:46:19

    哇撒,以为很难,没有想到代码这么简单

    回复
取消回复