Jquery.hover-slider.js

Demo:

Vertical

If there is no 'active' element:

Code examples:

Init:

$('.demo-1 ul').hoverSlider();

Default options:

$('.demo-1 ul').hoverSlider({
        sliderClass     : 'hover-slider', // slider class name (your cap)
        activeElemClass : 'active',       // class name for active link
        speed           : 400,            // slider speed
        easing          : 'swing'         // animation easing
      });

Add some simple styles to slider:

        ul {
          position: relative; //parent must have position relative
        }

        .hover-slider {
          display: block;
          height: 2px;
          position: absolute;
          bottom: 0;
          background-color: #000;
          pointer-events: none;
        }
      

hover-slider use jQuery animation, by default jQuery provide only two easing functions: 'swing' (which is already using) and 'linear', if you want to use some other animation, you can use this library easings.net