导航菜单
手机移动设备jQuery多级侧边栏菜单
PetitQ
hc-mobile-nav 是一款适合移动手机的 jQuery 多级侧边栏菜单插件。它可以创建移动优先的、多级的隐藏滑动侧边栏菜单，支持折叠菜单、向下展开菜单和完全展开菜单等多种展示方式。
使用方法：
在页面中引入 jquery、hc-mobile-nav.js 和 hc-mobile-nav.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="css/hc-mobile-nav.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hc-mobile-nav.js"></script>
HTML 结构：
该 jQuery 多级侧边栏菜单的基本 HTML 结构如下：
<nav id="main-nav">
<ul class="first-nav">
<li class="cryptocurrency">
<a href="#">Cryptocurrency</a>
<ul>
<li><a href="#">Bitcoin</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">NEO</a></li>
<li><a href="#">ZCash</a></li>
<li><a href="#">Dogecoin</a></li>
</ul>
</li>
</ul>
<ul class="second-nav">
<li class="devices">
<a>Devices</a>
<ul>
<li class="mobile">
<a href="#">Mobile Phones</a>
<ul>
<li><a href="#">Super Smart Phone</a></li>
<li><a href="#">Thin Magic Mobile</a></li>
<li><a href="#">Performance Crusher</a></li>
<li><a href="#">Futuristic Experience</a></li>
</ul>
</li>
<li class="television">
<a href="#">Televisions</a>
<ul>
<li><a href="#">Flat Superscreen</a></li>
<li><a href="#">Gigantic LED</a></li>
<li><a href="#">Power Eater</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Classic Comfort</a></li>
</ul>
</li>
<li class="camera">
<a href="#">Cameras</a>
<ul>
<li><a href="#">Smart Shot</a></li>
<li><a href="#">Power Shooter</a></li>
<li><a href="#">Easy Photo Maker</a></li>
<li><a href="#">Super Pixel</a></li>
</ul>
</li>
</ul>
</li>
<li class="magazines">
<a href="#">Magazines</a>
<ul>
<li><a href="#">National Geographic</a></li>
<li><a href="#">Scientific American</a></li>
<li><a href="#">The Spectator</a></li>
<li><a href="#">The Rambler</a></li>
<li><a href="#">Physics World</a></li>
<li><a href="#">The New Scientist</a></li>
</ul>
</li>
<li class="store">
<a href="#">Store</a>
<ul>
<li>
<a href="#">Clothes</a>
<ul>
<li>
<a href="#">Women's Clothing</a>
<ul><li><a href="#">Tops</a></li><li><a href="#">Dresses</a></li><li><a href="#">Trousers</a></li><li><a href="#">Shoes</a></li><li><a href="#">Sale</a></li></ul></li><li><a href="#">Men's Clothing</a>
<ul>
<li><a href="#">Shirts</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sale</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li class="collections"><a href="#">Collections</a></li>
<li class="credits"><a href="#">Credits</a></li>
</ul>
</nav>
JavaScript 代码：
在页面 DOM 元素加载完毕之后，通过下面的方法来初始化该 jQuery 多级侧边栏菜单插件：
jQuery(document).ready(function($) {$('#main-nav').hcMobileNav({maxWidth: 980
});
});
配置参数：
该 jQuery 多级侧边栏菜单插件的可用参数如下：
maxWidth：代表屏幕小于多少像素时按移动设备的方式来显示菜单。默认值为 1024
labels：关闭和返回链接的标签。默认为{close: 'Close',back: 'Back'}
该 jQuery 多级侧边栏菜单插件的 github 地址为：https://github.com/somewebmedia/hc-mobile-nav
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
