Slinky.js 基于 jQuery 移动端多级导航滑动插件

Question

一款轻量级响应式移动手机样式多级导航菜单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();

可选参数

Parameter	Default	Description
resize	true	Resize menu height to match content on navigation
speed	300	Transition speed in milliseconds
theme	slinky-theme-default	Slinky theme
title	false	Show title of sub menu

API 文档

.home(animate)

返回顶级菜单。

Parameter	Default	Description
animate	true	Pass false to skip animation

.jump(target, animate)

导航到某个子菜单。

Parameter	Default	Description
target	–	Selector for ul target to jump to
animate	true	Pass false to skip animation

.destroy()

移除 Slinky。

提示

在初始化的时候，给某个 ul 设置 .active 类，就可以直接跳转到该菜单。

在线实例：https://slinky.js.org/