Updated on September 08, 2019.

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 ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: