Sliding Menu Hover Indicator In Vanilla JavaScript – Magic Line Navigation

Category: Javascript , Menu & Navigation | February 28, 2020
Author:basticodes
Views Total:585 views
Official Page:Go to website
Last Update:February 28, 2020
License:MIT

Preview:

Sliding Menu Hover Indicator In Vanilla JavaScript – Magic Line Navigation

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:

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

You Might Be Interested In:


Leave a Reply