cbFlyout-响应式jQuery多级隐藏侧边栏菜单插件

cbFlyout是一款简单实用的响应式jQuery多级隐藏侧边栏菜单插件。该隐藏侧边栏插件实用简单，通过简单的设置最小视口参数就可以在小于该视口宽度时，将导航菜单转换为隐藏侧边栏菜单。

使用方法

使用该多级隐藏侧边栏菜单插件需要在页面中引入global.css，jQuery和jquery.cbFlyout.js文件。

<link rel="stylesheet" href="css/global.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>          
<script type="text/javascript" src="js/jquery.cbFlyout.js"></script>               
                

HTML结构

该多级隐藏侧边栏菜单的HTML结构如下：

<div class="layout-left-flyout visible-sm"></div>
<div class="layout-right-content">
  <header class="the-header">
    <div class="navbar container">

      <!-- Trigger -->
      <a class="btn-navbar btn-navbar-navtoggle btn-flyout-trigger" href="#">
        <span class="icon-bar btn-flyout-trigger"></span>
        <span class="icon-bar btn-flyout-trigger"></span>
        <span class="icon-bar btn-flyout-trigger"></span>
      </a>

      <!-- Structure -->
      <nav class="the-nav nav-collapse clearfix">
        <ul class="nav nav-pill pull-left">
          <li class="dropdown">
            <a href="#">Dogs <b class="caret"></b></a>
            <ul class="subnav">
              <li><a href="#">Terrier</a></li>
              <li><a href="#">Labrador</a></li>
              ...
            </ul>
          </li>
          <li class="dropdown">
            <a href="#">Cats  <b class="caret"></b></a>
            <ul class="subnav">
              <li><a href="#">Persian</a></li>
              <li><a href="#">Siamese</a></li>
              ...
            </ul>
          </li>
          <li class="dropdown">
            <a href="#">Primates  <b class="caret"></b></a>
            <ul class="subnav">
              <li><a href="#">Monkey</a></li>
              ...
            </ul>
          </li>
        </ul>
        <ul class="nav nav-pill pull-right">
          <li><a href="#">Congress </a></li>
          ...
        </ul>
      </nav>
    </div>
  </header>
  <main class="container">
    ...
  </main>
</div><!-- END .layout-left-flyout -->
                

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该多级隐藏侧边栏菜单插件。

$('.the-nav').cbFlyout( minWidth:768 );                  
                

minWidth参数用于指定最小视口宽度。在浏览器视口小于该视口宽度时，导航菜单将转换为隐藏侧边栏菜单。