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