cbFlyout-响应式jQuery多级隐藏侧边栏菜单插件 A Responsive Off Screen Navigation jQuery Plugin

Effective Responsive navigation patterns are so hard to find nowdays. There are so many of them. They look promising, but a lot of the time when you get into actually beggining to use one, it bites you in the behind.

I've gone ahead and made a nice jQuery plugin to give people more options. I could sit here and try to describe with words what it does but this is a demo, and you're already here, so just go ahead and play with it.

→ (缩放你的浏览器窗口)RESIZE THE SCREEN! ←

<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 -->
  

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

Added minWidth option to specify a minimum width to allow the nav to be remain active.