Стилизация мобильного меню для отображения активного

Question

Итак, у меня есть мобильное меню, всего 4 шарика. Есть большой шарик, который является активным, и 3 других в полукруге вокруг него.

Я не могу заставить работать две вещи. с помощью javascript я хочу установить активный класс для того, на который нажали, чтобы он, в свою очередь, превратился в большой пузырь, а первый возвращается в полукруг. Что по какой-то причине я не могу начать работать.

И с css позиционирование облажается, если я устанавливаю активный класс на какой-то другой. Я не могу заставить их работать .. Надеюсь, это имеет смысл ...

Codepen: https://codepen.io/andrelange91/pen/bGGvjvx

HTML

<nav class="navigation navigation--active">
  <a class="navigation__item navigation__item--inactive">1</a>
  <a class="navigation__item navigation__item--inactive">2</a>
  <a class="navigation__item navigation__item--inactive">3</a>
  <a class="navigation__item navigation__item--active">4</a>
</nav>

Css

.navigation{
  position:fixed;
  right:20px;
  bottom:20px;
  width:100px;
  height:100px;
  .navigation__item{
    padding:10px;
    background-color:green;
    color:white;
    border-radius:50%;
    position:absolute;
    &--active{
      z-index:10;
    }
  }
  &.navigation--active{
      .navigation__item{
        &--inactive{
          &:nth-child(1){
            background-color:purple;
            right: 30px;
            top: 0px;
          }
          &:nth-child(2){
            background-color:blue;
            left:10px;
            top:20px;
          }
          &:nth-child(3){
            background-color:black;
            bottom:0;
            left:10px;
          }
        }
        &--active{
          background-color:red;
          padding:20px;
          right:0;
          bottom:0;
        }

      }
    }
}

И, наконец, мой JavaScript

const elementsArray = document.getElementsByClassName("navigation__item");

for (var i = 0; i < elementsArray.length; i++) {
  elementsArray[i].addEventListener("click", function(e){
    console.log(i);
      elementsArray[i].classList.remove("navigation__item--inactive");
      elementsArray[i].classList.add("navigation__item--active");
  });
}

Я просмотрел документацию для Eventlistener,и список классов, но я не могу заставить его работать ... А с CSS я не могу понять, как заставить его динамически позиционироваться.

Любая помощь руководства будет оценена ..

Answer 1

Вам нужно добавить addEventListener, чтобы каждый элемент захватывал его событие click, и вы можете различить выбранный элемент и остальную часть элемента, используя e.target Вы можете использовать атрибуты данных вместо nth-child таким образомВы можете изменить порядок номеров

const elementsArray = document.getElementsByClassName("navigation__item");
const inactiveElementsArray = document.getElementsByClassName("navigation__item--inactive");
for (var i = 0; i < elementsArray.length; i++) {
    elementsArray[i].addEventListener('click', changeSize, false);
  
}
function changeSize(e){
  for (var i = 0; i < elementsArray.length; i++) {
    elementsArray[i].classList.remove("navigation__item--active");
    elementsArray[i].classList.add("navigation__item--inactive");
  }
  e.target.classList.remove("navigation__item--inactive");
  e.target.classList.add("navigation__item--active");
  e.target.setAttribute('data-position', "main");
  elementsOrder();
}
function elementsOrder(){
  for (var i = 0; i < inactiveElementsArray.length; i++) {
    inactiveElementsArray[i].setAttribute('data-position', i);
  }

}

.navigation {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 100px;
  height: 100px;
}
.navigation .navigation__item {
  padding: 10px;
  background-color: green;
  color: white;
  border-radius: 50%;
  position: absolute;
}
.navigation .navigation__item--active {
  z-index: 10;
}
.navigation__item--inactive[data-position="0"] {
  background-color: purple;
  right: 30px;
  top: 0px;
}
.navigation__item--inactive[data-position="1"] {
  background-color: blue;
  left: 10px;
  top: 20px;
}
.navigation__item--inactive[data-position="2"] {
  background-color: black;
  bottom: 0;
  left: 10px;
}
.navigation.navigation--active .navigation__item--active {
  background-color: red;
  padding: 20px;
  right: 0;
  bottom: 0;
}

<nav class="navigation navigation--active">
  <a class="navigation__item navigation__item--inactive" data-position="0">1</a>
  <a class="navigation__item navigation__item--inactive" data-position="1">2</a>
  <a class="navigation__item navigation__item--inactive" data-position="2">3</a>
  <a class="navigation__item navigation__item--active" data-position="main">4</a>
</nav>