How to Make Animated Sliding Menu Indicator Using Elementor for FREE | Elementor Tutorial

Find the Animated Sliding Menu Indicator code used in this tutorial in below

Color code used:

Page Background Color:
#0e1538

JS code used:

<script>
window.onload = function(){
	var cpcitems = document.querySelectorAll('#menu-1-96ee580 li');
	
	cpcitems.forEach((link) => {
		let childIndicator = document.createElement('span');
		
		childIndicator.setAttribute('id', 'cpcindicator');
		
		link.appendChild(childIndicator);
	});
};

</script>

CSS code used:

.sliding-menu ul li a{
    z-index: 5;
}
.sliding-menu ul li span{
    z-index: 3;
}
.sliding-menu ul li:hover #cpcindicator{
    position: absolute;
    width: 89px;
    height: 56px;
    background: #0e0621;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.sliding-menu ul li:hover #cpcindicator::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: -30px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 0 5px #0e0621;
}
.sliding-menu ul li:hover #cpcindicator::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: -30px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-bottom-left-radius: 20px;
    box-shadow: -5px 5px 0 5px #0e0621;
}

Share On

Facebook
Twitter
Pinterest
LinkedIn
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.
On Key

Related Posts