JavaScript库，用于创建切换的画布外多级导航，允许无休止地嵌套子菜单元素，支持滑动手势、键盘交互和ARIA属性。
Posted
tags:
中文标题：JavaScript库，用于创建切换的画布外多级导航，允许无休止地嵌套子菜单元素，支持滑动手势、键盘交互和ARIA属性。 原文标题：JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes. 项目评级：Star:313 Fork:81 下载地址：https://github.com/somewebmedia/hc-offcanvas-nav 详情介绍HC非画布导航
用于使用ARIA创建画布外多级导航的JavaScript库。不依赖，但也可以作为jQuery插件使用。演示
特征
快速启动
安装
此软件包可以与以下组件一起安装：
或者下载最新版本。
包括HC非画布导航
脚本和Css标记
Webpack/浏览器化
在脚本中，包括HC的画布外导航通常如下所示：
巴别塔
AMD（异步模块定义）
如果使用AMD，模块将自动定义为hcOffcanvasNav。
南海
用法
一旦您的菜单元素在DOM中可用，请务必调用Nav。
香草JS
jQuery公司
为了让HC离画布Nav作为jQuery插件工作，jQuery必须是全局window对象的属性，所以在与Babel/Webpack/Browserify和jQuery组合使用时要小心。
HTML菜单结构示例
主题
HC非画布导航目前有两个主题，默认主题和Carbon主题。要使用碳主题，只需调用碳主题css，而不是默认的css：
或者，如果从src目录编译SCSS，则从@include目录编译：
选项
<表格>
属性 默认 类型 描述
280left和right位置'auto'top和bottom位置falsenullfalse'left''left'、'right'、＞1216＞和'bottom'trueleft和right的位置'overlap''overlap'、'expand'、＞1224＞或false40truenull''truetruefalsedata-nav-active）truetruenullnulltruetrue''se按钮
'Back'truefalse'prepend'truefalse...特定元素上aria-label属性的ARIA标签，将为屏幕上没有可见文本的元素提供文本替代。
方法
HC Off-canvas Nav API提供了两种方法来控制offcanvas，并对所有活动实例公开可用。
香草JS
jQuery公司
.getSettings（）（获取设置）
返回当前设置。
.isOpen（）（打开）
检查导航是否打开，并返回布尔值。
.update（选项，updateDOM）
使用新设置仅更新指定的设置。
更新导航DOM。您不必传递空的设置对象，该方法是明智的。当原始导航被更改时使用此选项。
更新设置和导航DOM。当原始导航更改时使用此选项，并且您还想更新一些特定设置。
.open（级别、索引）
如果关闭，打开导航。
打开导航和特定的子菜单。每个级别的子菜单都有自己的索引，该索引相对于该级别，而不是父菜单。
以上代码将打开以下示例结构中的嵌套菜单：
.close（）（关闭）
如果打开，关闭导航。
.thoggle（）
切换（打开/关闭）导航。
.on（事件名称，cb）
将事件侦听器连接到导航。
.off（事件名称，cb）
从导航中删除事件侦听器。
事件
<表格>
事件 描述
所有事件都返回Event对象作为第一个参数，并返回插件Settings对象作为第二个参数。
导航动画结束后会触发打开和关闭事件，而切换事件会立即触发。
示例：
数据属性
<表格>
收件人 接受 HTML元素 描述
<ul>，<li><li>元素具有该属性的子菜单）。适用于expanded选项<li><li><a>WordPress数据属性集成
如果你想让你的WordPress主题导航数据做好准备，只需将此代码放在functions.php文件中，它就可以开箱即用了。不要将此自定义Walker分配给您的wp_nav_menu参数！如果你已经使用了自己的自定义Walker，也不用担心，这个代码会处理所有事情。
开发人员大楼
这个包裹随Gulp一起提供。以下任务可用：
如果您不想缩小编译后的JS和Css，可以传递--dev命令。
许可证
代码和文档是根据麻省理工学院许可证发布的。