Trunk.js是一款非常实用的轻量级响应式跨平台的jQuery导航菜单插件。该插件会根据viewport的大小来重置导航菜单。在大屏幕设备中,导航菜单以常规的水平菜单展示,在移动手机等小屏幕设备中,它会将菜单转换为侧边栏隐藏菜单。
使用方法
使用该响应式导航菜单插件需要引入jQuery、trunk.js和trunk.css文件。
<link rel="stylesheet" href="css/trunk.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/trunk.js"></script>
HTML结构
在移动手机等小屏幕设置中,默认只会在头部显示一个汉堡包图标,它的HTML结构如下:
<header class="slide"> <ul id="navToggle" class="burger slide"> <li></li><li></li><li></li> </ul> </header>
导航菜单的HTML结构如下:
<nav class="slide"> <ul> <li><a href="#" class="active">HOME</a></li> <li><a href="#">LINK TWO</a></li> <li><a href="#">LINK THREE</a></li> <li><a href="#">LINK FOUR</a></li> <li><a href="#">LINK FIVE</a></li> <li><a href="#">LINK SIX</a></li> <li><a href="#">LINK SEVEN</a></li> </ul> </nav>
整个页面的HTML结构如下:
<div class="content slide"> <ul class="responsive"> <li class="header-section"> <p class="placefiller">HEADER</p> </li> <li class="body-section"> <p class="placefiller">BODY</p> </li> <li class="footer-section"> <p class="placefiller">FOOTER</p> </li> </ul> </div>
按照上面的HTML结构,即可构建出一个带响应式导航菜单的布局。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!