Morphing Nav

How it works

Morphing Nav is a nestable widget. It contains “Morphing Items” where the morphing div will morph when the user hovers on them.
In order to collapse Morphing Nav at mobile devices, you can just edit it’s flex settings at the style tab to a column.

Content tab

Settings group

Event: determines when to morph the morphing div: click or hover.
Page name as active item: determines the default Morphing Item where the morphing div will be set on page load if it matches the Page’s title.
Active item: determines the default Morphing Item where the morphing div will be set on page load. e.g: “1” will set first Morphing item as the active one on page load. Requires “Page name as active item” to be disabled.

Animation group

Duration
Delay
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Style tab

Morphing div’s styles can be set at the Morphing div group.
There are more groups to customize Morphing Nav at pleasure.