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