on mouse hover border move
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() //
https://ivision.com/
Comments