jQuery | 垂直导航插件

简介

垂直导航插件是一款基于jQuery的导航插件，可以快速的在网站中添加垂直导航菜单。它可以自定义不同的颜色、图标、悬停状态等，使得导航栏更加美观。

特性

• 简单易用 - 一行代码就能完成导航菜单的设置
• 兼容性强 - 可以兼容各种主流浏览器
• 自定义颜色 - 可以自由定义导航菜单的不同状态的颜色
• 多种图标选择 - 提供多种常用的图标选择，方便个性化设置
• 支持响应式 - 可以根据屏幕大小自动适应布局

安装

你可以通过以下方式安装该插件:

npm安装

npm install jquery-vertical-navigation

下载源码

你也可以从Github上下载源码，并将其直接引入到你的HTML页面中即可。同时，你还需要引入jQuery库。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/jquery.verticalNavigation.min.js"></script>

使用

你可以通过以下代码来使用该插件:

$(function() {
  // 绑定插件
  $('#navigations').verticalNavigation();

  // 改变插件的默认选项
  $('#navigations').verticalNavigation({
    speed: 1000,
    activeClass: 'active',
    expandButtonText: '+',
    collapseButtonText: '-',
    expandIcon: '<i class="fa fas fa-angle-down"></i>',
    collapseIcon: '<i class="fa fas fa-angle-up"></i>',
    onItemExpand: function() {
      console.log('Item Expanded');
    },
    onItemCollapse: function() {
      console.log('Item Collapsed');
    }
  });
});

配置项

| 配置选项 | 类型 | 默认值 | 描述 | | -------------------- | ------------------- | ------------------------ | ------------------------------------------------------------ | | speed | Number | 300 | 换页速度 | | activeClass | String | active | 活动项目的类名 | | expandButtonText | String | + | 展开按钮文本 | | collapseButtonText | String | - | 折叠按钮文本 | | expandIcon | String | | 展开按钮图标 | | collapseIcon | String | | 折叠按钮图标 | | expandButtonText | String | + | 展开按钮文本 | | onItemExpand | Function | $.noop | 当展开项目时触发的回调函数 | | onItemCollapse | Function | $.noop | 当折叠项目时触发的回调函数 | | onBeforeItemExpand | Function | $.noop | 展开项目之间触发的回调函数。如果该函数返回false，则取消展开 | | onBeforeItemCollapse | Function | $.noop | 折叠项目之间触发的回调函数。如果该函数返回false，则取消折叠 | | onReady | Function | $.noop | 当插件初始化完成时触发的回调函数 | | onBeforeInit | Function | $.noop | 在插件初始化之前触发的回调函数 | | onDestroy | Function | $.noop | 当插件销毁时触发的回调函数 | | isAccordion | Boolean | false | 是否为手风琴模式 | | accordionModeClass | String | expanded | 手风琴模式的类名 | | slideDuration | Number | 400 | 滑块切换持续时间 | | slideEasing | String | swing | 滑块切换效果 | | fixedHeight | Boolean/Number | false | 每个菜单项的固定高度。如果是数字，则使用该数字作为固定高度 | | expandOnClick | Boolean | true | 是否单击单个项目时展开子项目 | | itemSelector | String | li | 项目的选择器 | | excludeSelector | String | | 排除选择器 | | expandAll | Boolean/Number | false | 是否展开所有的项目。如果是数字，则展开指定级别的项目 | | startCollapsed | Boolean/Number | false | 是否在默认情况下收缩所有元素。如果是数字，则表示只有指定级别是折叠的 | | scroll | Boolean | false |是否开启滚动 | | scrollOffset | Number | 0 |滚动偏移量 | | scrollDuration | Number | 300 |滚动持续时间 | | excludeScrollSelector| String | false |不参与滚动处理的菜单项选择器，例如：'li:not(.scroll-disabled)'| | smoothScroll | Boolean | false | 是否启用平滑滚动 | | onScrollStart | Function | $.noop | 滚动开始时调用的回调函数 | | onScrollStop | Function | $.noop | 滚动结束时调用的回调函数 | | onScrolling | Function | $.noop | 滚动进行过程中调用的回调函数 |

示例

你可以通过以下链接查看示例: 示例页面

总结

垂直导航插件是一款非常实用的jQuery插件，可以帮助我们快速的添加网站导航菜单，极大地提高了网站的用户体验。它具有丰富的配置项，可以根据自己的需求来进行配置，自定义不同状态下的颜色和图标等。同时也支持响应式布局，在不同屏幕大小下自动适配布局，让导航栏更加美观和实用。