Updated on Wednesday, April 21, 2021.
This members-only tutorial provides the steps to implement Direction aware hover effect for navigation menu items in Oxygen.
Variation 1
Uses CSS only.
Hover effect starts from the middle and expands out left and right.
Variation 2
Uses CSS + JS.
Hover effect is direction aware and the "border" moves in the direction of mouse movement between menu items.
Behaves like Variation 1 when hovered from the bottom.
Step 1
In Oxygen editor, edit your Menu component.
You might want to adjust Hover & Active settings to accommodate the hover effect.
Step 2
Add the following CSS: