Slinky.js 基于 jQuery 移动端多级导航滑动插件 - 文章教程

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

发布于 2020-06-26 字数 3096 浏览 1340 评论 0

一款轻量级响应式移动手机样式多级导航菜单jQuery插件。它使用简单,可以创建多级嵌套的移动设计样式的导航菜单效果。

Slinky.js 基于 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/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0