jQuery Plugin To Highlight Active Menu Item On Hover - hover-slider.js

hover-slider.js is a simple, lightweight jQuery plugin used to display a customizable, animated slider on hover to indicate the active item in your horizontal or vertical navigation menu.

See also:

• Customizable Sliding Text Underline Plugin With jQuery - Hoverline
• jQuery Plugin To Create Sliding Underlines For Any Elements - Slida
• jQuery Plugin For LavaLamp-Like Menu Hover Effect - Lavazi
• jQuery Animated Navigation with Sliding Background - Lava Lamp

How to use it:

1. Include the latest version of jQuery and jQuery hover-slider.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.hover-slider.js"></script>

2. Create a navigation menu from an html list:

<ul>
  <li class="active"><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a></li>
  <li><a href="#">Menu Item 3</a></li>
  <li><a href="#">Menu Item 4</a></li>
  <li><a href="#">Menu Item 5</a></li>
</ul>

3. Call the function to generate a default slider that slides between menu items on mouse move.

$('ul').hoverSlider();

4. Apply you custom CSS styles to the hover slider.

.hover-slider {
  position: absolute;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hover-slider:before {
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  left: 10px;
  right: 10px;
  background-color: #000;
  bottom: 0;
}

5. Override the default animation options. For more easing effects, you might need to load the jQuery UI or jQuery easing plugin in the webpage.

$('ul').hoverSlider({

  // animation speed
  speed           : 400,

  // easing type
  easing          : 'swing',
  
});

6. Execute a function on init.

$('ul').hoverSlider({

  onInit          : null

});

Change log:

2016-08-03

• added vertical menu support

---

This awesome jQuery plugin is developed by iamvaskiv. For more Advanced Usages, please check the demo page or visit the official website.