Published on Jun 5, 2019

Nav menu items hover animation in Oxygen

Sridhar 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 $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right