3

Создал меню, работает идеально для элементов с одинаковыми названиями. Но когда изменяю названия одного элемента, то нижнее подчеркивание расположено не по середине. Что тут не так?

const menu = document.querySelector(".menu");
  const bord = document.querySelector(".border-bottom");

  var windowW = document.body.clientWidth / 2 - menu.children[0].offsetWidth / 2,
  bordW = menu.children[0].offsetWidth / 2 - bord.offsetWidth / 2,
  menuLinksW = 0, position = [0], temp = 1;

  menu.style.cssText = "transform: translateX(" + windowW + "px)";
  bord.style.cssText = "transform: translateX(" + bordW + "px)";
  
  for(let i = 0; i < menu.children.length; i++){
menu.children[i].addEventListener("click", function(){
  for(let i = 0; i < menu.children.length; i++){

    if(this == menu.children[i]){
      position[temp] = i;
      temp++;

      let v1 = position[position.length - 1];
      let v2 = position[position.length - 2];
      let n1 = v1 > v2 ? v1 : v2;
      let n2 = v1 < v2 ? v1 : v2;
      
      for(let ex = n2; ex < n1; ex++){
        windowW += v1 < v2 ? menu.children[ex].offsetWidth : (-menu.children[ex].offsetWidth);
        bordW += v1 > v2 ? menu.children[ex].offsetWidth : (-menu.children[ex].offsetWidth);
      }
      menu.style.cssText = "transform: translateX(" + windowW + "px)";
      bord.style.cssText = "transform: translateX(" + bordW + "px)";
    }
  }
})
  }
*{
    box-sizing: border-box;
  }

  body{
    margin: 0;
    overflow-x: hidden;
  }

  .menu{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    transition: .5s;
  }

  .menu-link{
    position: relative;
    text-decoration: none;
    color: #000;
    font-family: consolas;
    padding: 12px 24px;
  }

  .border-bottom{
    position: absolute;
    width: 50px;
    height: 4px;
    background-color: black;
    transition: .5s;
    bottom: 0;
    left: 0;
  }
<div class="menu">
  <a href="#" class="menu-link active">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextTextTextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <div class="border-bottom"></div>
</div>

4
  • В расчётах нет ничего про ширину текущего элемента (эти расчёты необходимы для позиционирования относительно ширины элемента). Сдвиг происходит только по левому краю элементов.
    – 7-zete-7
    22 фев 2022 в 14:18
  • Вместо цикла с проверкой на this можно воспользоваться самим this или методом Array.prototype.indexOf.
    – 7-zete-7
    22 фев 2022 в 14:20
  • @7-zete-7 не работате indexOf, хз почему, выдаёт ошибку Cannot read properties of undefined
    – Miha
    22 фев 2022 в 14:37
  • @ПростаMiha Кстати про подчеркивания,- когда набиваете текст, красным подчеркивает слова с ошибками. Мне нравятся ваши ответы, я знаю, что вы не носитель языка, что вам трудно, но вы хотели, если мне не изменяет память, совершенствоваться. (++) 22 фев 2022 в 17:15

1 ответ 1

2

Всё сделал, спасибо всем за помощь

const menu = document.querySelector(".menu");
  const bord = document.querySelector(".border-bottom");

  var windowW = document.body.clientWidth / 2 - menu.children[0].offsetWidth / 2,
  bordW = 0,
  menuLinksW = 0, position = [0], temp = 1;

  menu.style.cssText = "transform: translateX(" + windowW + "px)";
  bord.style.cssText = "transform: translateX(" + (menu.children[0].offsetWidth / 2 - bord.offsetWidth / 2) + "px)";
  
  for(let i = 0; i < menu.children.length; i++){
    menu.children[i].addEventListener("click", function(){
      for(let i = 0; i < menu.children.length; i++){

        if(this == menu.children[i]){
          position[temp] = i;
          temp++;

          let v1 = position[position.length - 1];
          let v2 = position[position.length - 2];
          let n1 = v1 > v2 ? v1 : v2;
          let n2 = v1 < v2 ? v1 : v2;
          
          for(let ex = n2; ex < n1; ex++){
            windowW += v1 < v2 ? menu.children[ex].offsetWidth : (-menu.children[ex].offsetWidth);
            bordW += v1 > v2 ? menu.children[ex].offsetWidth : (-menu.children[ex].offsetWidth);

          }
          menu.style.cssText = "transform: translateX(" + windowW + "px)";
          bord.style.cssText = "transform: translateX(" + ((this.offsetWidth / 2) - bord.offsetWidth / 2 + bordW) + "px)";
        }
      }
    })
  }
*{
    box-sizing: border-box;
  }

  body{
    margin: 0;
    overflow-x: hidden;
  }

  .menu{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    transition: .5s;
  }

  .menu-link{
    position: relative;
    text-decoration: none;
    color: #000;
    font-family: consolas;
    padding: 12px 24px;
  }

  .menu-link:focus{
    color: red;
  }

  .border-bottom{
    position: absolute;
    width: 50px;
    height: 4px;
    background-color: black;
    transition: .5s;
    bottom: 0;
    left: 0;
  }
<div class="menu">
  <a href="#" class="menu-link active">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextTextTextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">TextTextText</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <a href="#" class="menu-link">Text</a>
  <div class="border-bottom"></div>
</div>

Ваш ответ

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

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