const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX
};
Ссылка на страницу
.highlight {
transition: all 0.5s;
border-bottom: 2px solid rgba($accent-color3, .6);
position: absolute;
z-index: 2;
top: 0;
background: rgba($accent-color3, .6);
left: 0;
display: block;
border-radius: 4px;
}//Add nav-link hover animation
const triggers = $('.nav-menu__link');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
$('body').append(highlight);
triggers.on('mouseenter', function() {
highlight.style.opacity = '1';
const linkCoords = this.getBoundingClientRect();
console.log(linkCoords);
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX
};
highlight.style.width = `${coords.width}px`;
highlight.style.height = `${coords.height}px`;
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
});
triggers.on('mouseleave', function() {
highlight.style.opacity = '0';
});//Add .toggle-dropdown__link onclick animation
const trigger = $('.toggle-dropdown__link');
const highlights = document.createElement('span');
highlights.classList.add('highlight');
$('body').append(highlights);
trigger.on('click', function() {
highlights.style.opacity = '1';
const linkCoord = this.getBoundingClientRect();
console.log(linkCoord);
const coords = {
width: linkCoord.width,
height: linkCoord.height,
top: linkCoord.top + window.scrollY,
left: linkCoord.left + window.scrollX
};
highlights.style.width = `${coords.width}px`;
highlights.style.height = `${coords.height}px`;
highlights.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
});