slinky是一款轻量级响应式移动手机样式多级导航菜单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();
配置参数
slinky多级导航菜单插件的配置参数如下:
| 参数 | 默认值 | 描述 |
| label | 'Back' | 返回按钮的文本。设置为true可以使用链接文字作为文本。 |
| title | false | 设置为true显示当前级别的菜单标题。 |
| speed | 300 | 动画速度,单位毫秒。 |
| resize | true | 是否改变菜单的高度来匹配内容。 |
slinky多级导航菜单插件的github地址为:https://github.com/alizahid/slinky
版权声明
文章来源: https://www.uihtm.com/jquery/9216.html
版权说明:仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。我们非常重视版权问题,如有侵权请邮件(44784009#qq.com)与我们联系处理。敬请谅解!






















