Press "Enter" to skip to content

Animated Sliding Active Menu Item Indicator In jQuery | Navigation Menu

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.

animated menu indicator css, change active menu item on page scroll, css sliding border navigation menu, single page navigation menu active indicator, animated menu bar in html

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, menu opening animation css, css active menu item arrow, tabs underline animation css


See Demo And Download

Official Website(EricPorter): Click Here

This superior jQuery/javascript plugin is developed by EricPorter. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *