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