轻量级跨平台的jQuery响应式导航菜单插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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结构，即可构建出一个带响应式导航菜单的布局。