0

Есть меню в шапке. Задумка в том, что при наведении на конкретный пункт меню, бордер будет плавно перемещаться с выбранного на пункт под курсором. Пример: пользователь находится на главной, бордер у него вокруг "главная", наводит на вкладку "бренды" - бордер перемещается туда и приобретает нужный размер . Подскажите пожалуйста как это реализовать. Спасибо

.header-menu__button {
  color: black;
  padding: 52px 25px;
}
.header-menu__main-button {
  color: #000;
  margin-right: 17px;
  padding: 8px 16px;
  border: 2px solid #000;
  border-radius: 20px;
  align-items: center;
}
<div class="header-menu__links">
  <a href="#" class="header-menu__main-button">главная</a> 
  <a href="#" class="header-menu__button">бренды</a>
  <a href="#" class="header-menu__button">каталог</a>
  <a href="#" class="header-menu__button">статьи</a>
  <a href="#" class="header-menu__button">точки продаж</a>
  <a href="#" class="header-menu__button">о нас</a>
</div>

1
  • google search - lava lamp menu css js
    – soledar10
    Commented 18 окт. 2022 в 15:10

1 ответ 1

5

Я бы посоветовал найти плагин что делает подобную анимацию. Но если нужен кастом то мое решение подходит. Вот решение:

function animateHeaderLink() {
  let headerLinks = document.querySelectorAll('.header-list__item')
  let headerLinkBg = document.querySelector('.header-nav__link-bg')
  
  if(!headerLinks.length) {
    return;
  }
  
  headerLinks.forEach((el, index) => { 
    const width = el.getBoundingClientRect().width;
    const height = el.getBoundingClientRect().height; 
   
    el.addEventListener('mouseover', () => { 
       let x = 0;
       for(let i = 0; i < index; i++) {
          x += headerLinks[i].getBoundingClientRect().width;
       }
    
       headerLinkBg.style.cssText = `
        width: ${width}px;
        height: ${height}px;
        transform: translateX(${x}px);  
      `;
    })
  })
  
  function setDefaults() {
    const width = headerLinks[0].getBoundingClientRect().width;
    const height = headerLinks[0].getBoundingClientRect().height; 
    
    headerLinkBg.style.cssText = `
      width: ${width}px;
      height: ${height}px;
      transform: translateX(0);  
    `;
  }
  setDefaults()
}
animateHeaderLink();
.header-nav__list {
  list-style: none;
  display: flex;
  position: relative;
  padding: 0px;
  width: fit-content;
}

.header-list__item {
  width: fit-content;
}

.header-nav__link {
  display: block;
  color: #000;
  width: 100%;
  height: fit-content; 
  padding: 20px 10px;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.header-nav__link-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  display: block;
  border: 2px solid #000;
  border-radius: 50px;
  will-change: transform;
  transition: 0.4s all;
}
<header class="header">
  <nav class="header-nav">
    <ul class="header-nav__list">
        <div class="header-nav__link-bg"></div>
        <li class="header-list__item">
          <a href="#" class="header-nav__link">главная</a> 
        </li>
        <li class="header-list__item">
          <a href="#" class="header-nav__link">бренды</a>
        </li>
        <li class="header-list__item">
          <a href="#" class="header-nav__link">каталог</a>
        </li>
        <li class="header-list__item">
          <a href="#" class="header-nav__link">статьистатьи</a>
        </li>
        <li class="header-list__item">
           <a href="#" class="header-nav__link">о нас </a>
        </li>
    </ul>
  </nav>
</header>

6
  • 1
    "... и приобретает нужный размер" Вот это отсутствует у Вас.
    – UModeL
    Commented 18 окт. 2022 в 15:22
  • 2
    @UModeL Добавил исправление
    – Bakhtiyar
    Commented 18 окт. 2022 в 15:26
  • спасибо большое) Commented 18 окт. 2022 в 16:33
  • @Bakhtiyar есть проблема - сразу после анимации бордера ссылка перестает работать Commented 18 окт. 2022 в 16:55
  • 1
    @DzenisenkaFiodar Добавь z-index ссылкам
    – Bakhtiyar
    Commented 18 окт. 2022 в 16:56

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.