worm type border effect in menu

JS
============================

$('.custom-menu-primary .custom-left-menu .hs-menu-wrapper').append('<div id="line"></div>');
$('.custom-menu-primary .custom-left-menu .hs-menu-wrapper > ul').prepend('<li style="display:none;" class="hs-menu-item hs-menu-depth-1 active-click"></li>');

(function () {
  var $activeWidth, $defaultMarginLeft, $defaultPaddingLeft, $firstChild, $line, $navListItem;
  $line = $('#line');
  $navListItem = $('.custom-menu-primary .custom-left-menu .hs-menu-wrapper > ul > li > a');
  $activeWidth = $('.active-click').width();
  $firstChild = $('.custom-menu-primary .custom-left-menu .hs-menu-wrapper > ul > li:first-child');
  $defaultMarginLeft = parseInt($('.custom-menu-primary .custom-left-menu .hs-menu-wrapper > ul > li').next().position().left);
  $defaultPaddingLeft = parseInt($('.custom-menu-primary .custom-left-menu .hs-menu-wrapper > ul').position().left);
  console.log($defaultMarginLeft);
  console.log($defaultPaddingLeft);
  $line.width($activeWidth + 'px');
  $line.css('marginLeft', $defaultPaddingLeft + 'px');
 
  $navListItem.click(function () {
    var $activeNav, $currentIndex, $currentOffset, $currentWidth, $initWidth, $marginLeftToSet,
        $this;
    $this = $(this).parent();
    $activeNav = $('.active-click');
    $currentWidth = $activeNav.outerWidth();
    $currentOffset = $activeNav.position().left;
    $currentIndex = $activeNav.index();
    $activeNav.removeClass('active-click');
    $this.addClass('active-click');
    if ($this.is($activeNav)) {
      return 0;
    } else {
      if ($this.index() > $currentIndex) {
        if ($activeNav.is($firstChild)) {
          $initWidth = $defaultMarginLeft + $this.outerWidth() + $this.position().left -
            $defaultPaddingLeft;
        } else {
          $initWidth = $this.position().left + $this.outerWidth() - $currentOffset;
        }
        $marginLeftToSet = $this.position().left + $defaultMarginLeft + 'px';
        $line.width($initWidth + 'px');
        return setTimeout(function () {
          $line.css('marginLeft', $marginLeftToSet);
          return $line.width($this.outerWidth() + 'px');
        }, 175);
      } else {
        if ($this.is($firstChild)) {
          $initWidth = $currentOffset - $defaultPaddingLeft + $defaultMarginLeft +
            $currentWidth;
          $marginLeftToSet = $this.position().left;
        } else {
          $initWidth = $currentWidth + $currentOffset - $this.position().left;
          $marginLeftToSet = $this.position().left + $defaultMarginLeft;
        }
        $line.css('marginLeft', $marginLeftToSet);
        $line.width($initWidth + 'px');
        return setTimeout(function () {
          return $line.width($this.outerWidth() + 'px');
        }, 175);
      }
    }
  });
}).call(this);


CSS
====================

.custom-menu-primary .custom-left-menu .hs-menu-wrapper {
    display: inline-block !important;
    width: auto;
  }
  .custom-menu-primary .custom-left-menu .hs-menu-wrapper > ul {
    display: block;
  }
  .custom-menu-primary .custom-left-menu .hs-menu-wrapper div#line {
    position: absolute;
    bottom: 5px;
    height: 2px;
    background: #7fb401;
    -webkit-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;

  }