一款轻量级响应式移动手机样式多级导航菜单jQuery插件。它使用简单,可以创建多级嵌套的移动设计样式的导航菜单效果。
使用方法
使用该导航菜单插件需要在页面中引入jquery.slinky.css和jquery,以及jquery.slinky.js文件。
<link rel="stylesheet" href="path/to/jquery.slinky.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.slinky.js"></script>
HTML结构
该导航菜单的HTML结构是使用一个<div>作为容器,里面使用无序列表来制作菜单项,在菜单项中在嵌套无序列表来制作多级子菜单。
<div id="menu" class="slinky-menu">
<ul>
<li>
<a href="#">多级导航菜单</a>
</li>
<li>
<a href="#">Artists</a>
<ul>
<li>
<a href="#">Aerosmith</a>
</li>
......
</ul>
</li>
......
</ul>
</div>
初始化插件
在页面DOM元素加载完毕之后,通过slinky()方法来初始化该多级导航菜单插件。
$('.slideshow').skidder();