24 Navigation Hover Animations

This tutorial explains how to add advanced hover animations for your site navigation using CSS and JavaScript code.

Tools

Code editor

Estimated time

10 min.

Basic plugin configuration

Go to Plugin Settings ➝ Design ➝ Border ➝ Enable all borders. Border width set to 0.

Adding basic CSS code

1. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

 

body:not(.gridbox) .nav-hover-effect .nav.menu > li > a { background: none; overflow: hidden; position: relative; transition: none !important;}body:not(.gridbox) .nav-hover-effect .nav.menu > li > a > i,body:not(.gridbox) .nav-hover-effect .nav.menu > li > a > span { z-index: 5; position: relative; display: block;}body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:before,body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:after { border-radius: inherit; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; transition: .3s !important;}body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:before { z-index: 1;}body:not(.gridbox) .nav-hover-effect .nav.menu > li > a:after { background: var(--button-border-color); z-index: 2;}

Adding basic JavaScript code

2. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

 

document.addEventListener('DOMContentLoaded', () => { jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(index, el){ var elVal = jQuery(el).text(); jQuery(el).attr('data-hover', elVal); }); jQuery(".nav-hover-effect .main-menu .nav.menu > li a").wrapInner("<span></span>");jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(){ let style = getComputedStyle(this), color = style.backgroundColor, borderColor = style.borderTopColor; this.style.setProperty('--button-background-color', color); this.style.setProperty('--button-border-color', borderColor); }).on('mouseenter', function(){ let color = getComputedStyle(this).backgroundColor; this.style.setProperty('--button-background-hover', color); });});

Adding CSS class suffix

3. Copy CSS class suffix from the demo, go to Item Settings ➝ General ➝ Advanced ➝ Class Suffix and paste it.

Adding CSS

4. Copy CSS from the demo, go to Tools ➝ Code Editor ➝ CSS and paste it.

Something is not clear? Ask a question on community forums.