当前位置:首页 > 新闻中心 > 解决方案
深圳网站建设分享:实用的jQuery导航菜单插件责任编辑 :李飞    文章来源 :星翼创想(www.iswweb.com)    发布时间 :2015-11-10    阅读次数:2992

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文章转载请保留网址:http://www.iswweb.com/news/solutions/1539.html

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


不加微信即时沟通

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