diff --git a/examples/menubar/menubar-1/css/menubarLinks.css b/examples/menubar/menubar-1/css/menubarLinks.css
index 5f356235e5..b05b5d5fb7 100644
--- a/examples/menubar/menubar-1/css/menubarLinks.css
+++ b/examples/menubar/menubar-1/css/menubarLinks.css
@@ -6,66 +6,98 @@ ul[role="menubar"] {
background-color: #EEEEEE;
}
+ul[role="menubar"] [role="menuitem"] {
+ display: inline-block;
+ position: relative;
+ margin: 0;
+ padding: 0.25em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ text-decoration: none;
+ color: black;
+}
+
ul[role="menubar"] [role="menuitem"],
ul[role="menubar"] [role="separator"] {
+ margin: 0;
padding: 0.25em;
background-color: #EEEEEE;
border: 2px solid #EEEEEE;
}
-ul[role="menubar"] [role="separator"] {
- padding-top: 0.15em;
- background-image: url('../images/separator.png');
- background-position: center;
- background-repeat: repeat-x;
+
+ul[role="menubar"] [role="menuitem"] > a {
+ text-decoration: none;
+ color: black;
+ border: none;
}
-ul[role="menubar"] [role="menuitem"]:focus,
-ul[role="menubar"] [role="menuitem"]:hover,
-ul[role="menubar"] [role="separator"]:focus,
-ul[role="menubar"] [role="separator"]:hover {
- background-color: black;
- color: white;
+ul[role="menubar"] > [role="menuitem"] > a {
+ margin-right: 0.5em;
}
-ul[role="menubar"] a[role="menuitem"] {
- text-decoration: none;
- color: black;
+ul[role="menubar"] [role="menu"] [role="menuitem"] {
+ width: 10em;
+}
+
+ul[role="menubar"] [role="menu"] [role="separator"] {
+ padding-top: 0.15em;
+ background-image: url('../images/separator.png');
+ background-position: center;
+ background-repeat: repeat-x;
}
-ul[role="menubar"] li {
+ul[role="menubar"] ul {
list-style: none;
margin: 0;
padding: 0;
}
-ul[role="menubar"] > li {
- display: inline;
- position: relative;
+ul[role="menubar"] [role="menu"] [role="menuitem"] {
+ width: 10em;
}
-ul[role="menubar"] > li > a:after {
- content: url('../images/down-arrow-brown.png');
- padding-left: .25em;
+ul[role="menubar"] [role="menuitem"] > [role="menu"] {
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ top: 2.5em;
+ left: -0.25em;
}
-
-ul[role="menubar"] ul[role="menu"] {
- display: none;
- position: absolute;
- top: -2px;
- left: 0;
+ul[role="menubar"] [role="menuitem"] > [role="menu"] [role="menu"] {
margin: 0;
padding: 0;
+ position: absolute;
+ top: 0em;
+ left: 10.5em;
}
+ul[role="menubar"] [role="menuitem"][aria-expanded="false"] > [role="menu"] {
+ display: none;
+}
-ul[role="menubar"] ul[role="menu"] li a {
+ul[role="menubar"] [role="menuitem"][aria-expanded="true"] > [role="menu"] {
display: block;
- width: 10em;
}
-ul[role="menubar"] ul[role="menu"] a[aria-haspopup="true"]:after {
+ul[role="menubar"] [role="menuitem"]:focus,
+ul[role="menubar"] [role="menuitem"]:focus > a,
+ul[role="menubar"] [role="menuitem"]:hover,
+ul[role="menubar"] [role="menuitem"]:hover > a,
+ul[role="menubar"] [role="separator"]:focus,
+ul[role="menubar"] [role="separator"]:hover {
+ background-color: #222;
+ color: white;
+}
+
+
+ul[role="menubar"] > [role="menuitem"] [role="menu"] [role="menuitem"][aria-haspopup="true"] > a:after {
content: url('../images/right-arrow-brown.png');
padding-right: 2em;
}
+
+ul[role="menubar"] > [role="menuitem"] [role="menu"] [role="menuitem"][aria-haspopup="true"][aria-expanded="true"] > a:after {
+ content: url('../images/down-arrow-brown.png');
+ padding-left: .25em;
+}
diff --git a/examples/menubar/menubar-1/js/MenubarItemLinks.js b/examples/menubar/menubar-1/js/MenubarItemLinks.js
index 5806674836..47a95e077c 100644
--- a/examples/menubar/menubar-1/js/MenubarItemLinks.js
+++ b/examples/menubar/menubar-1/js/MenubarItemLinks.js
@@ -6,6 +6,8 @@ var MenubarItem = function (domNode, menuObj) {
this.menu = menuObj;
this.domNode = domNode;
+ this.linkElem = false;
+
this.popupMenu = false;
this.hasFocus = false;
@@ -38,12 +40,20 @@ MenubarItem.prototype.init = function () {
this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
+ // check to see if the the menu item has a child
+ var elem = this.domNode.firstElementChild;
+
+ if (elem && elem.tagName === 'A') {
+ elem.tabIndex = -1;
+ this.linkElem = elem;
+ }
+
// Initialize pop up menus
- var nextElement = this.domNode.nextElementSibling;
+ var menuElement = this.domNode.querySelector('[role="menu"]');
- if (nextElement && nextElement.tagName === 'UL') {
- this.popupMenu = new PopupMenu(nextElement, this);
+ if (menuElement) {
+ this.popupMenu = new PopupMenu(menuElement, this);
this.popupMenu.init();
}
@@ -61,7 +71,6 @@ MenubarItem.prototype.handleKeydown = function (event) {
switch (event.keyCode) {
case this.keyCode.SPACE:
- case this.keyCode.RETURN:
case this.keyCode.DOWN:
if (this.popupMenu) {
this.popupMenu.open();
@@ -70,6 +79,21 @@ MenubarItem.prototype.handleKeydown = function (event) {
}
break;
+ case this.keyCode.RETURN:
+ var anchor = tgt.firstElementChild;
+ if (anchor && anchor.href) {
+ window.location.href = anchor.href;
+ flag = true;
+ }
+ else {
+ if (this.popupMenu) {
+ this.popupMenu.open();
+ this.popupMenu.setFocusToFirstItem();
+ flag = true;
+ }
+ }
+ break;
+
case this.keyCode.LEFT:
this.menu.setFocusToPreviousItem(this);
flag = true;
diff --git a/examples/menubar/menubar-1/js/MenubarLinks.js b/examples/menubar/menubar-1/js/MenubarLinks.js
index a5e18fafb3..dd2ca4d18f 100644
--- a/examples/menubar/menubar-1/js/MenubarLinks.js
+++ b/examples/menubar/menubar-1/js/MenubarLinks.js
@@ -55,16 +55,15 @@ Menubar.prototype.init = function () {
// Traverse the element children of menubarNode: configure each with
// menuitem role behavior and store reference in menuitems array.
- elem = this.domNode.firstElementChild;
+ var elem = this.domNode.firstElementChild;
while (elem) {
- var menuElement = elem.firstElementChild;
- if (elem && menuElement && menuElement.tagName === 'A') {
- menubarItem = new MenubarItem(menuElement, this);
+ if (elem.getAttribute('role') === 'menuitem') {
+ menubarItem = new MenubarItem(elem, this);
menubarItem.init();
this.menubarItems.push(menubarItem);
- textContent = menuElement.textContent.trim();
+ textContent = elem.firstElementChild.textContent.trim();
this.firstChars.push(textContent.substring(0, 1).toLowerCase());
}
diff --git a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js
index 45267e3dba..3e2147649c 100644
--- a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js
+++ b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js
@@ -10,6 +10,7 @@ var MenuItem = function (domNode, menuObj) {
this.domNode = domNode;
this.menu = menuObj;
+ this.linkElem = false;
this.popupMenu = false;
this.isMenubarItem = false;
@@ -39,12 +40,20 @@ MenuItem.prototype.init = function () {
this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
+ // check to see if the the menu item has a child
+ var elem = this.domNode.firstElementChild;
+
+ if (elem && elem.tagName === 'A') {
+ elem.tabIndex = -1;
+ this.linkElem = elem;
+ }
+
// Initialize flyout menu
- var nextElement = this.domNode.nextElementSibling;
+ var menuElement = this.domNode.querySelector('[role="menu"]');
- if (nextElement && nextElement.tagName === 'UL') {
- this.popupMenu = new PopupMenu(nextElement, this);
+ if (menuElement) {
+ this.popupMenu = new PopupMenu(menuElement, this);
this.popupMenu.init();
}
@@ -68,7 +77,6 @@ MenuItem.prototype.handleKeydown = function (event) {
switch (event.keyCode) {
case this.keyCode.SPACE:
- case this.keyCode.RETURN:
if (this.popupMenu) {
this.popupMenu.open();
this.popupMenu.setFocusToFirstItem();
@@ -91,12 +99,27 @@ MenuItem.prototype.handleKeydown = function (event) {
clickEvent.initEvent('click', true, true);
}
}
- tgt.dispatchEvent(clickEvent);
+ tgt.firstElementChild.dispatchEvent(clickEvent);
}
flag = true;
break;
+ case this.keyCode.RETURN:
+ var anchor = tgt.firstElementChild;
+ if (anchor && anchor.href) {
+ window.location.href = anchor.href;
+ flag = true;
+ }
+ else {
+ if (this.popupMenu) {
+ this.popupMenu.open();
+ this.popupMenu.setFocusToFirstItem();
+ flag = true;
+ }
+ }
+ break;
+
case this.keyCode.UP:
this.menu.setFocusToPreviousItem(this);
flag = true;
@@ -114,7 +137,6 @@ MenuItem.prototype.handleKeydown = function (event) {
break;
case this.keyCode.RIGHT:
- console.log('[MenuItem][handleKeydown]: ' + this.menu.controller.isMenubarItem);
if (this.popupMenu) {
this.popupMenu.open();
this.popupMenu.setFocusToFirstItem();
diff --git a/examples/menubar/menubar-1/js/PopupMenuLinks.js b/examples/menubar/menubar-1/js/PopupMenuLinks.js
index 5dab7bce84..f5a6536af3 100644
--- a/examples/menubar/menubar-1/js/PopupMenuLinks.js
+++ b/examples/menubar/menubar-1/js/PopupMenuLinks.js
@@ -60,9 +60,19 @@ PopupMenu.prototype.init = function () {
childElement = this.domNode.firstElementChild;
while (childElement) {
- menuElement = childElement.firstElementChild;
+ menuElement = false;
- if (menuElement && menuElement.tagName === 'A') {
+ if (childElement.getAttribute('role') === 'menuitem') {
+ menuElement = childElement;
+ }
+ else {
+ if (childElement.firstElementChild &&
+ childElement.firstElementChild.getAttribute('role') === 'menuitem') {
+ menuElement = childElement.firstElementChild;
+ }
+ }
+
+ if (menuElement) {
menuItem = new MenuItem(menuElement, this);
menuItem.init();
this.menuitems.push(menuItem);
@@ -211,24 +221,6 @@ PopupMenu.prototype.getIndexFirstChars = function (startIndex, char) {
PopupMenu.prototype.open = function () {
// Get position and bounding rectangle of controller object's DOM node
- var rect = this.controller.domNode.getBoundingClientRect();
-
- console.log('[PopupMenu][open]');
-
- // Set CSS properties
- if (!this.controller.isMenubarItem) {
- this.domNode.parentNode.style.position = 'relative';
- this.domNode.style.display = 'block';
- this.domNode.style.position = 'absolute';
- this.domNode.style.left = rect.width + 'px';
- this.domNode.style.zIndex = 100;
- }
- else {
- this.domNode.style.display = 'block';
- this.domNode.style.position = 'absolute';
- this.domNode.style.top = (rect.height - 1) + 'px';
- this.domNode.style.zIndex = 100;
- }
this.controller.setExpanded(true);
@@ -236,8 +228,6 @@ PopupMenu.prototype.open = function () {
PopupMenu.prototype.close = function (force) {
- console.log('[PopupMenu][close][force]: ' + force);
-
var controllerHasHover = this.controller.hasHover;
var hasFocus = this.hasFocus;
@@ -249,15 +239,11 @@ PopupMenu.prototype.close = function (force) {
}
}
- console.log('[PopupMenu][close][hasFocus]: ' + hasFocus);
-
if (!this.controller.isMenubarItem) {
controllerHasHover = false;
}
if (force || (!hasFocus && !this.hasHover && !controllerHasHover)) {
- this.domNode.style.display = 'none';
- this.domNode.style.zIndex = 0;
this.controller.setExpanded(false);
}
};
diff --git a/examples/menubar/menubar-1/mb-about.html b/examples/menubar/menubar-1/mb-about.html
index 392666ecbf..305ada7934 100644
--- a/examples/menubar/menubar-1/mb-about.html
+++ b/examples/menubar/menubar-1/mb-about.html
@@ -3,7 +3,11 @@
Menubar Example Landing Page: About
-
+
@@ -11,20 +15,39 @@
Menubar Example Landing Page
- About
- Back to menubar example
+
About
+ Back to menubar example
+
+ Overview
+ Back to menubar example
+
+ Administration
+ Back to menubar example
+
+ Facts
+ Back to menubar example
+
+ History
+ Back to menubar example
+
+ Current Stats
+ Back to menubar example
+
+ Awards
+ Back to menubar example
+
+ Campus Tours
+ Back to menubar example
- Overview
- Back to menubar example
+
Prospective Students
+ Back to menubar example
- Administration
-
Back to menubar example
+
Alumni
+ Back to menubar example
- Facts
-
Back to menubar example
+
Vistors
+ Back to menubar example
- Campus Tours
-
Back to menubar example
diff --git a/examples/menubar/menubar-1/mb-academics.html b/examples/menubar/menubar-1/mb-academics.html
index a5711a6a75..d65a0337e8 100644
--- a/examples/menubar/menubar-1/mb-academics.html
+++ b/examples/menubar/menubar-1/mb-academics.html
@@ -13,40 +13,33 @@ Menubar Example Landing Page
Academics
- Back to menubar example
+
Back to menubar example
Colleges & Schools
- Back to menubar example
-
+
Back to menubar example
Programs of Study
- Back to menubar example
-
+
Back to menubar example
Honors Programs
- Back to menubar example
-
+
Back to menubar example
Online Courses
- Back to menubar example
-
+
Back to menubar example
Course Explorer
- Back to menubar example
-
+
Back to menubar example
Register for Class
- Back to menubar example
-
+
Back to menubar example
Academic Calendar
- Back to menubar example
-
+
Back to menubar example
Transscripts
- Back to menubar example
+
Back to menubar example
-