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;
}