Как создать многоуровневое меню слайдер с кнопкой назад javascript?

Михаил Р.,
да с радостью бы заплатила деньги на фриланс , никто не хочет брать.
Функционал: 1.Чтобы можно было делать вложенность сколько угодно.2. Кнопка "назад"- одна на все меню. 3 Появление кнопки только тогда, когда открывается второе меню. 4. Скрывать кнопку "назад" когда достигаем опять первого меню.
Нужно сделать без использования бибилиотек. Пока что не придумала как это сделать. Если поможете буду сильно благодарна

<div class="bask btn">назад</div>
<nav class="nav"> 
    <ul class="menu-one">
      <li class="menu-link text-or-20"><a href="">Home</a></li>
      <li class="menu-link text-or-20"><a href="">Dropdown 1 </a>
        <ul class="menu-two">
          <li><a href=""> Menu 1</a></li>
          <li><a href="">Menu 2</a>
            <ul class="menu-three">
              <li><a href=""> 1 Sub Menu 1</a></li>
              <li><a href=""> 1 Sub Menu 2</a></li>
              <li><a href=""> 1 Sub Menu 3</a></li>
            </ul>
          </li>
          <li><a href="">Menu 3</a>
            <ul class="menu-three">
              <li><a href=""> 1 Sub Menu 1</a></li>
              <li><a href=""> 1 Sub Menu 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="menu-link text-or-20"><a href="">Dropdown 2 </a>
        <ul class="menu-two">
          <li><a href="">Menu 2 </a>
            <ul>
              <li><a href=""> 2 Sub Menu 1</a></li>
              <li><a href=""> 2 Sub Menu 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</nav>

document.querySelectorAll('li').forEach(element => element.addEventListener('click', event => {
  event.preventDefault();
  event.stopPropagation();

  let innerLists = element.querySelector('ul');
  if (innerLists) {
    if (!innerLists.classList.contains("show-list")) {
      document.querySelector("ul").querySelectorAll("ul").forEach(elm => {
        if (!isDescendant(elm, element)) {
          elm.classList.remove("show-list")
        }
      });
    }

    innerLists.classList.toggle("show-list");
  }
}));

function isDescendant(parent, child) {
  let node = child.parentNode;
  while (node != null) {
    if (node === parent) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

.nav {
    position: relative;
}
nav ul,
nav ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .menu-one {
    background: dodgerblue;
  }
 .menu-one,
 .menu-two,
 .menu-three  {
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  
.menu-two {
    background: rgb(13, 130, 141);
    z-index: 2;
    width: 100%;
}
  
 .menu-three {
    background-color: red;
    z-index: 3;
    height: 100%;
    width: 100%;
  }
  .menu-two,
  .menu-three {
    display: none;
    transition: max-height 1s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  
  
  .menu-link {
      color: $color-bid-black;
      padding: 23px 0;
    }
    .menu-two.active {
        display:none;
    }
    .show-list {
      display: block;
      transition: max-height 1s ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

Как создать многоуровневое меню слайдер с кнопкой назад javascript?

szQocks, Слайдер это образно так называется) Ну что-то не доходит до меня как реализовать

Как создать многоуровневое меню слайдер с кнопкой назад javascript?

szQocks, не подскажешь где?
Может мне подойдет это

Как создать многоуровневое меню слайдер с кнопкой назад javascript?

szQocks,
Нужно многоуровневое меню.Вот есть примерный код. Нужно тобы по клику на кнопку назад скрывалось одно меню. Также чтобы кнопка назад показывалась только при клике на первое меню.И желательно это все как-то сделать так, чтобы было бесконечно количесвто добавления меню. Пока что не придумала как это сделать. Если поможете буду сильно благодарна

<div class="bask btn">назад</div>
<nav class="nav"> 
    <ul class="menu-one">
      <li class="menu-link text-or-20"><a href="">Home</a></li>
      <li class="menu-link text-or-20"><a href="">Dropdown 1 </a>
        <ul class="menu-two">
          <li><a href=""> Menu 1</a></li>
          <li><a href="">Menu 2</a>
            <ul class="menu-three">
              <li><a href=""> 1 Sub Menu 1</a></li>
              <li><a href=""> 1 Sub Menu 2</a></li>
              <li><a href=""> 1 Sub Menu 3</a></li>
            </ul>
          </li>
          <li><a href="">Menu 3</a>
            <ul class="menu-three">
              <li><a href=""> 1 Sub Menu 1</a></li>
              <li><a href=""> 1 Sub Menu 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="menu-link text-or-20"><a href="">Dropdown 2 </a>
        <ul class="menu-two">
          <li><a href="">Menu 2 </a>
            <ul>
              <li><a href=""> 2 Sub Menu 1</a></li>
              <li><a href=""> 2 Sub Menu 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</nav>

document.querySelectorAll('li').forEach(element => element.addEventListener('click', event => {
  event.preventDefault();
  event.stopPropagation();

  let innerLists = element.querySelector('ul');
  if (innerLists) {
    if (!innerLists.classList.contains("show-list")) {
      document.querySelector("ul").querySelectorAll("ul").forEach(elm => {
        if (!isDescendant(elm, element)) {
          elm.classList.remove("show-list")
        }
      });
    }

    innerLists.classList.toggle("show-list");
  }
}));

function isDescendant(parent, child) {
  let node = child.parentNode;
  while (node != null) {
    if (node === parent) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

.nav {
    position: relative;
}
nav ul,
nav ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .menu-one {
    background: dodgerblue;
  }
 .menu-one,
 .menu-two,
 .menu-three  {
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  
.menu-two {
    background: rgb(13, 130, 141);
    z-index: 2;
    width: 100%;
}
  
 .menu-three {
    background-color: red;
    z-index: 3;
    height: 100%;
    width: 100%;
  }
  .menu-two,
  .menu-three {
    display: none;
    transition: max-height 1s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  
  
  .menu-link {
      color: $color-bid-black;
      padding: 23px 0;
    }
    .menu-two.active {
        display:none;
    }
    .show-list {
      display: block;
      transition: max-height 1s ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

Как создать многоуровневое меню слайдер с кнопкой назад javascript?

Библиотеки не подходят

В firefox не работает transition opacity?

Это на слайдах не работает с этим скриптом, может в нем проблема
т.е происходит смена background-image при переключении слайда
if(picture) {
picture.classList.add(`picture_style_${swiper.realIndex + 1}`); // +1 для того, чтобы не было класса типа .picture_style_0.

/*Обрабатываем событие смены слайда*/
swiper.on('slideChange', function() {
picture.className = 'picture'; //"Сбрасываем" стиль шапки на значение по умолчанию
picture.classList.add(`picture_style_${swiper.realIndex + 1}`); //В зависимости от того, на каком по счёту слайде сейчас находимся, устанавливаем соответствующий стиль шапке
});
}@IvanU7n,