Allow tabbing across the sub menu items in Oxygen Menu (for keyboard user)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Thanks a million, David!
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
Hi there
thanks for the snippet.
will it work on the new pro-menu?