Skip to content

Instantly share code, notes, and snippets.

@wplit
Last active Feb 14, 2022
Embed
What would you like to do?
Allow tabbing across the sub menu items in Oxygen Menu (for keyboard user)
/* Allows focus on sub menu items by tabbing menu
------------------------------------------------ */
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item .sub-menu {
right: 5000px;
visibility: visible;
}
.oxy-nav-menu:not(.oxy-nav-menu-open).menu-item .sub-menu .sub-menu {
right: auto;
}
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:hover > .sub-menu,
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:focus-within > .sub-menu {
right: auto;
opacity: 1;
}
/* Match color changes on focus to be the same as on hover
(This needs to be changed to match colors on website as set in Oxygen)
------------------------------------------------ */
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:focus-within a,
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item a:focus {
background-color: #6799b2;
color: #fff!important;
}
@zviz
Copy link

zviz commented Mar 26, 2020

Hi there
thanks for the snippet.
will it work on the new pro-menu?

@Bovelett
Copy link

Bovelett commented Apr 24, 2021

Thanks a million, David! 🙏

@madjedo
Copy link

madjedo commented Feb 8, 2022

Thank you for this. However there are some issues with it as of Oxygen 3.9.

But my solution for a vertical menu was:

`
/* Allows focus on sub menu items by tabbing menu
------------------------------------------------ */

.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item .sub-menu {
  left: 5000px;
  visibility: visible;
}

.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:hover > .sub-menu,
.oxy-nav-menu:not(.oxy-nav-menu-open) .menu-item:focus-within > .sub-menu {
  left: 100%;
  opacity: 1;
}

`
(for standard menu element only)

Note that this is solution is not considered 100% accessible due to fact that sub menus are opened directly on tabbing. To get 100% accessible you need extra javascript for this (so tabs only opens when pressing enter). But for a menu with only a few subitems this should be ok.

For more info regarding this: https://www.w3.org/WAI/tutorials/menus/flyout/#keyboard-users

This should get you on your way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment