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.

How to make use of it:

1. Create an animated navigation menu from an HTML unordered checklist.

<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 newest jQuery library on the finish of the doc.

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

4. The jQuery script to activate the menu item indicator.

$(".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 );

CSS Sliding Border Navigation Menu, Active Menu Item CSS jQuery, CSS menu transition effects