速递行业新闻

提供多角度全方位的新闻视角

深圳网站建设分享:实用的jQuery导航菜单插件

时间:2015-11-10

来源:星翼创想(www.iswweb.com)

作者:李飞

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结构如下:

深圳市星翼创想网络科技有限公司
广东省深圳市罗湖区和平路3001号鸿隆世纪广场B座13G
邮政编码:518000
电话: 0755-82685986/82685936
微信: 159-8667-8737(微信同号)
邮箱: market@iswweb.com
传真: 0755-82685820
微信小程序开发


加微信即时沟通

深圳市星翼创想网络科技有限公司 版权所有
粤ICP备10210107号 Copyright © 2010-2025 All Rights Reserved.