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
参数用于指定最小视口宽度。在浏览器视口小于该视口宽度时,导航菜单将转换为隐藏侧边栏菜单。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!