一个jQuery导航插件，用于在涉及大量页面和/或产品的网站上创建键盘和屏幕阅读器可访问的超级菜单。

基本用法：

1.包括来自谷歌CDN的最新版本的jQuery库。

<script src="/path/to/cdn/jquery.min.js"></script>

2.在页面中包含jQuery Accessible Mega Menu的脚本和样式表文件。

<link rel="stylesheet" href="css/megamenu.css">
<script src="js/jquery-accessibleMegaMenu.js"></script>

3.按照Html结构创建一个巨型菜单：

<nav>
<ul class="nav-menu">
<li class="nav-item"> <a href="#">jQuery</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="#">jQuery 1</a></li>
<li><a href="#">jQuery 2</a></li>
<li>&#8230;</li>
</ul>
<ul class="sub-nav-group">
<li><a href="#">jQuery 3</a></li>
<li><a href="#">jQuery 4</a></li>
<li>&#8230;</li>
</ul>
<ul class="sub-nav-group">
<li><a href="#">jQuery 5</a></li>
<li><a href="#">jQuery 6</a></li>
<li>&#8230;</li>
</ul>
</div>
</li>
<li class="nav-item"> <a href="?tv">Zepto</a>
<div class="sub-nav">
<ul class="sub-nav-group">
<li><a href="#">Zepto 1</a></li>
<li><a href="#">Zepto 2</a></li>
<li>&#8230;</li>
</ul>
<ul class="sub-nav-group">
<li><a href="#">Zepto 3</a></li>
<li><a href="#">Zepto 4</a></li>
<li>&#8230;</li>
</ul>
<ul class="sub-nav-group">
<li><a href="#">Zepto 5</a></li>
<li><a href="#">Zepto 6</a></li>
<li>&#8230;</li>
</ul>
</div>
</li>
</ul>
</nav>

4.使用默认选项初始化超级菜单。

$(document).ready(function () {
$('.megamenu').accessibleMegaMenu();
});

5.所有设置。

$('.megamenu').accessibleMegaMenu({
 
  // unique ID's are required to indicate aria-owns, aria-controls and aria-labelledby
  uuidPrefix: "accessible-megamenu", 
 
  // default css class used to define the megamenu styling
  menuClass: "accessible-megamenu", 
 
  // default css class for a top-level navigation item in the megamenu
  topNavItemClass: "accessible-megamenu-top-nav-item", 
 
  // default css class for a megamenu panel
  panelClass: "accessible-megamenu-panel", 
 
  // default css class for a group of items within a megamenu panel
  panelGroupClass: "accessible-megamenu-panel-group", 
 
  // default css class for the hover state
  hoverClass: "hover", 
 
  // default css class for the focus state
  focusClass: "focus", 
 
  // default css class for the open state}); 
  openClass: "open",
 
  // default open delay when opening menu via mouseover
  openDelay: 0,
 
  // default open delay when opening menu via mouseover
  closeDelay: 250 
 
});

更新日志：

2022-04-26

• 修复以下示例中的列布局
• 修复了打开面板之间的箭头向上导航

2022-04-23

• 错误修复

2018-05-12

• 添加openOnMouseover设置，并切换ButtonClass以实现响应布局

2017-07-29

• 删除代码注释外的非js文本

2017-07-28

• 增加了closeDelay选项，而不是硬编码值

2017-03-25

• 将鼠标悬停在菜单上时添加可选延迟
• 修复顶部导航项目的CSS样式

2015-05-21

• 不要阻止点击切换中的元素

2014-08-28

• 如果导航项的重点是页面加载，则在关注的元素上触发focusin事件，这样它将展开菜单面板，而不是导航到底层url。

2014-04-03

• 修正了：字母数字搜索的正确行为

2014-03-07

• 修正了：Firefox、IE、Opera中的顶级菜单需要两次鼠标点击。

2014-01-22

• 错误已修复。

预览截图

jQuery和CSS3创建可访问 超级菜单