Animated Sliding Active Menu Item Indicator In jQuery

Animated Active Menu Indicator – A recent scrolling navigation cursor that moves when you hover over or activate a menu item. Written in jQuery and CSS/CSS3.

Must Read: jQuery Sliding Display Your Content Like a Deck of Cards

jQuery Animated Sliding Active Menu Item Details

Post Name	Animated Active Menu Indicator
Author Name	EricPorter
Category	Codepen, Menu Plugins
Official Page	Click Here
Official Website	codepen.io
Publish Date	September 11, 2020
Last Update	August 8, 2023
Download	Link Below
License	MIT

How to make use of it:

1. Create an animated navigation menu from HTML.

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Web</a></li>
  <li><a href="#">Code</a></li>
  <li><a href="#">Flow</a></li>
  <li><a href="#">Navigation</a></li>
  <li class="slide1"></li>
  <li class="slide2"></li>
</ul>

2. The needed types for the menu item indicator.

.nav .slide1,
.nav .slide2 

.nav .slide1 {
  background-color: #eeeeee30;
  z-index: 2;
}

.nav .slide2 
  opacity: 0;
  background-color: transparent;
  border: 1px solid #eeeeee70;
  z-index: 1;

3. Load the jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. The jQuery to activate the menu item.

$(".nav a").on("click", function () {
    var position = $(this).parent().position();
    var width = $(this).parent().width();
    $(".nav .slide1").css();
});

$(".nav a").on("mouseover", function () {
    var position = $(this).parent().position();
    var width = $(this).parent().width();
    $(".nav .slide2").css(
        opacity: 1,
        left: +position.left,
        width: width
    );
});

$(".nav a").on("mouseout", function () {
    $(".nav .slide2").css({ opacity: 0 });
});

var currentWidth = $(".nav").find("li:nth-of-type(1) a").parent("li").width();
var current = $("li:nth-of-type(1) a").position();
$(".nav .slide1").css( left: +current.left, width: currentWidth );