on mouse hover border move

PHOTO EMBED

Sun Sep 24 2023 18:24:29 GMT+0000 (Coordinated Universal Time)

Saved by @sagarmaurya19

https://ivision.com/




Updated js 




var setMenuPosition = function setMenuPosition() {
  var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
  if (window.innerWidth < 992) {
    return;
  }
  var hover = false;
  if (target && target.type && 'button' !== target.type) {
    hover = true;
    var hoverType = target.type;
    target = target.target;
    if ('mouseover' === hoverType) {
      buttonHover = true;
      target.removeEventListener('mouseover', setMenuPosition);
      target.addEventListener('mouseout', setMenuPosition);
    } else if ('mouseout' === hoverType) {
      buttonHover = false;
      target.removeEventListener('mouseout', setMenuPosition);
      target.addEventListener('mouseover', setMenuPosition);
      target = null;
    }
  }
  if (target && !target.classList.contains('cm-search-button')) {
    if (!document.documentElement.style.getPropertyValue('--menuUnderlinePosition')) {
      document.body.classList.add('menu-underline-init');
      document.documentElement.style.removeProperty('--menuUnderlineWidth');
    }
    document.documentElement.style.setProperty('--menuUnderlinePosition', "".concat(target.parentElement.getBoundingClientRect().left / 16, "rem"));

    setTimeout(function () {
      document.body.classList.remove('menu-underline-init');
      document.documentElement.style.setProperty('--menuUnderlineWidth', "".concat(target.offsetWidth - parseInt(window.getComputedStyle(target).getPropertyValue('padding-right'))));
    }, 1);
  } else {
    document.documentElement.style.removeProperty('--menuUnderlineWidth');
    setTimeout(function () {
      if (!document.body.classList.contains('body-child-open') && false === buttonHover) {
        document.documentElement.style.removeProperty('--menuUnderlineWidth');
        document.documentElement.style.removeProperty('--menuUnderlinePosition');
      }
    }, 400);
  }
  if (true === hover) {
    return;
  }
  var megaMenuContent;
  if (target) {
    megaMenuContent = target.parentElement.parentElement.querySelector('.hs-menu-children-wrapper');
  }
  if (megaMenuContent) {
    if (!document.documentElement.style.getPropertyValue('--openMenuLeft')) {
      document.body.classList.add('mega-menu-init');
      document.documentElement.style.removeProperty('--openMenuWidth');
    }
    megaMenuContent.style.removeProperty('--menuOffset');
    var button = target.parentElement;
    var menuContentRect = megaMenuContent.getBoundingClientRect();
    var buttonRect = button.getBoundingClientRect();
    var megaMenuRect = megaMenuContent.parentElement.getBoundingClientRect();
    var offset;
    if (menuContentRect.left > buttonRect.left) {
      offset = buttonRect.left - menuContentRect.left + button.offsetWidth / 2 - megaMenuContent.offsetWidth / 2;
      if (menuContentRect.left + offset < megaMenuRect.left) {
        offset = megaMenuRect.left - menuContentRect.left;
      }
    } else if (menuContentRect.right < buttonRect.left) {
      offset = buttonRect.right - menuContentRect.right - button.offsetWidth / 2 + megaMenuContent.offsetWidth / 2;
      if (menuContentRect.right + offset > megaMenuRect.right) {
        offset = megaMenuRect.right - menuContentRect.right;
      }
      //offset = buttonRect.right - menuContentRect.right;
    }

    if (offset) {
      megaMenuContent.style.setProperty('--menuOffset', "".concat(offset / 16, "rem"));
      menuContentRect = megaMenuContent.getBoundingClientRect();
    }
    document.documentElement.style.setProperty('--openMenuLeft', "".concat(menuContentRect.left / 16, "rem"));
    document.documentElement.style.setProperty('--openMenuWidth', "".concat(megaMenuContent.offsetWidth));
    document.documentElement.style.setProperty('--openMenuBottom', "".concat((megaMenuContent.offsetTop + megaMenuContent.offsetHeight + 64) / 16, "rem"));
    document.body.classList.remove('mega-menu-init');
  } else {
    document.documentElement.style.removeProperty('--openMenuBottom');
    setTimeout(function () {
      if (!document.body.classList.contains('body-child-open')) {
        document.documentElement.style.removeProperty('--openMenuLeft');
        document.documentElement.style.removeProperty('--openMenuWidth');
      }
    }, 400);
  }
};


var hoverMenuButtons = document.querySelectorAll('.custom-menu-primary li.hs-menu-item.hs-menu-depth-1 > div > a');

function activeBorder(){
  hoverMenuButtons.forEach(function (menuButton) {
    menuButton.addEventListener('mouseover', setMenuPosition);
  });
}
activeBorder()  
//
 
content_copyCOPY

https://ivision.com/