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

发布于 2020-06-26 08:06:53 字数 2860 浏览 1540 评论 0

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

可选参数

ParameterDefaultDescription
resizetrueResize menu height to match content on navigation
speed300Transition speed in milliseconds
themeslinky-theme-defaultSlinky theme
titlefalseShow title of sub menu

API 文档

.home(animate)

返回顶级菜单。

ParameterDefaultDescription
animatetruePass false to skip animation

.jump(target, animate)

导航到某个子菜单。

ParameterDefaultDescription
targetSelector for ul target to jump to
animatetruePass false to skip animation

.destroy()

移除 Slinky。

提示

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。