Published on Jun 5, 2019Nav menu items hover animation in OxygenSridhar Katakam 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: This is a premium members-only content. To view the rest of the content, please sign up for membership ($47/month or $599 one-time). Already a member? Log in below or here. Username Password Remember Me Forgot Password