cross-menu

1.1.4 • Public • Published

cross-menu

GitHub stars GitHub forks GitHub issues JavaScript Style Guide npm version GitHub license

仿亚马逊智能导航菜单功能,无依赖,支持现代浏览器。

Example

Demo

Usage

npm install --save cross-menu

// ES6
import crossMenu from 'cross-menu'
crossMenu(options)

// or

<script src="node_modules/cross-menu/dist/cross-menu.js"></script>
<script>
  crossMenu(options)
</script>

Options

  • menu{HTMLElement} @require

    一级菜单元素

  • menuItemTag{String} @require

    一级菜单元素下的菜单项标签:[...menu.querySelectorAll(menuItemTag)]

  • submenu{HTMLElement} @require

    二级菜单元素

  • submenuItemTag{String} @require

    二级菜单元素下的菜单项标签:[...submenu.querySelectorAll(submenuItemTag)]

  • delay{Number} @default = 300

    菜单切换延迟时间,即鼠标移动过程中在三角形区域内停顿 delay 毫秒表示切换一级菜单。

  • position{Object} @value = { top: Number, left: Number }

    菜单距离浏览器最上边和最左边的距离

    一般情况下不需要设置此属性,菜单的偏移值会被计算出来。只有当页面加载完成后菜单处于隐藏状态 display: none 时你需要使用此属性帮助确定位置,因为隐藏元素的 offsetParentnull

  • activeClassName{String} @default = 'active'

    当前活动菜单类名

  • activeIndex{Number}

    活动菜单的索引值,可用来设置默认活动菜单。

  • keepSubmenuVisible{Boolean} @default = false

    是否保持二级菜单显示状态(不隐藏二级菜单)

example

crossMenu({
  menu: document.querySelector('.menu'),
  menuItemTag: 'li',
  submenu: document.querySelector('.submenu'),
  submenuItemTag: 'li',
  delay: 100,
  activeClassName: 'active-menu',
  activeIndex: 3,
  keepSubmenuVisible: true
})

LICENSE

MIT

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.4
    9
    • latest

Version History

Package Sidebar

Install

npm i cross-menu

Weekly Downloads

9

Version

1.1.4

License

ISC

Last publish

Collaborators

  • agu