Sliding Menu Hover Indicator In Vanilla JavaScript – Magic Line Navigation

Preview:

Description:

This is the Vanilla JS version of the jQuery MagicLine Navigation that displays an interactive sliding indicator on menu items when hovering over. Also known as Lava Lamp Hover Effect.

It currently comes with 2 indicator modes:

• Line: displays a floating line under the menu items
• Pill: displays a floating Pill behind the menu items

See Also:

• Direction-aware Lava Lamp Hover Effect
• Responsive lava Lamp Style Navigation Plugin With jQuery

How to use it:

1. Import the main script magicline.js into the document.

<script src="dist/js/magicline.js"></script>

2. Attach the function magicLine to the navigation and done.

<nav class="example">
  <a>Menu</a>
  <a>Links</a>
  <a class="active">are</a>
  <a>awesome</a>
</nav>

var myMagicLine = new magicLine(
    document.querySelectorAll('.example'),
    {
      mode: 'line', // or 'pill'
    }
  );
myMagicLine.init();

3. Apply CSS styles to the floating line/pill.

.floating-line {
  border-radius: 4px;
  background: #FFF;
  box-shadow: 0 0 10px rgba(90, 129, 177, 0.6);
}

4. Execute a callback function for the animation. This needs a 3rd animation library such as anime.js.

<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>

var myMagicLine = new magicLine(
    document.querySelectorAll('.example'),
    {
      mode: 'line', // or 'pill'
      animationCallback: function (el, params) {
        anime({
          targets: el,
          left: params.left,
          top: params.top,
          width: params.width,
          height: params.height
        });
      }
    }
);

5. More configuration options with default values.

var myMagicLine = new magicLine(
    document.querySelectorAll('.example'),
    {
      navElements: 'a',
      lineStrength: 2,
      lineClass: 'floating-line',
      wrapper: 'div'
    }
);

Changelog:

v1.0.4 (02/28/2020)

• Fixed a bug where the animation would not work properly if the Nav Elements Selector has child Elements