Создал меню, работает идеально для элементов с одинаковыми названиями. Но когда изменяю названия одного элемента, то нижнее подчеркивание расположено не по середине. Что тут не так?
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>
this
можно воспользоваться самимthis
или методомArray.prototype.indexOf
.Cannot read properties of undefined