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

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

 9871  51  查看评论 (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');
    });
});
相关插件-垂直导航

jquery滑动菜单插件mmenu

创建无限量的应用程序极为相象的滑动菜单,无限量的子菜单
  垂直导航
 28190  88

jQuery下拉菜单插件Tendina

一个超级易用的jQuery插件,快速构建下拉菜单。
  垂直导航
 23636  38

侧滑导航适用于pc端与移动端

左侧导航右侧内容,导航可滑动 适用于移动端与pc端
  垂直导航
 12889  115

侧滑菜单插件Slideout.js

Slideout.js 触摸滑出导航菜单,为您的移动网络应用程序而生。
  垂直导航
 2925  25

讨论这个项目(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

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

    回复
取消回复