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

Question

[Evhar]

Как создать такое многоуровневое меню с одной кнопкой назад на бесконечное количество вложенности? Js кода нет. Уже весь интернет облазила ничего похожего нет.Либо очень много не нужных функций Буду благодарна js коду, если кто-то такое когда то реализовывал Выглядит вот так меню

Comments

[Михаил Р.]

Показывайте то, что у Вас не получилось, либо идите на фриланс.

[Evhar]

Михаил Р.,
да с радостью бы заплатила деньги на фриланс , никто не хочет брать.
Функционал: 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;
    }

[Сергей delphinpro]

Спасибо, но не подходит

Где ваше полу-работающее решение?
Вам скинули то, что работает. но вам это не подходит, видите ли.

Answer 1

[Александр]

помоежет slinky

Comments

[Evhar]

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

[szQocks]

Evhar, те подсказать надо как делать такое или сделать такое ?
- если подсказать то что именно ? всё или что-то конкретное ?
- если сделать на фриланс

[szQocks]

Evhar, всё что ты выделила ?

[szQocks]

Evhar, ты вообще уверена что это слайдер ? что-то я сомневаюсь, реально вправо влево при нажатии на пункты меню ?

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

[szQocks]

Evhar, если это слайдер, то можно все слайды заранее создать для каждой из категории, а вот добавлять их в слайдер - динамически, в тот момент когда юзер нажимает на кнопку назад ( добавляет категорию выше, и только после этого анимировать ), ну и изначально когда отображается слайдер впервые, отрисовывать только верхние категории ( один слайд )

если кликает по категории, то добавляем динамически в слайд тот контент который нужен для слайда, и так же - уже после анимируем вправо

[szQocks]

Александр на свайпере тоже такое можно сделать, тем подходом что я описал, там даже параметр есть специальный для динамических слайдов

[Evhar]

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;
    }

[Evhar]

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

[szQocks]

Evhar, у тебя подход не верный, ты пытаешься напрямую с дом работать, надо с объектами, и на основе объектов уже работать с дом + тут не нужно тебе меню если это слайдер ? зачем именно в дом эта вложенность ? включай голову

эта задача - хорошая для тебя, как раз прокачаешься

[Evhar]

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

[szQocks]

Evhar, попробую подсказать

1 экран, это твоё меню якобы которое на самом верхнем уровне да ?
что делаешь ты ? ты отрисовываешь вот этот кусок кода в доме, со всей вложенность и бегаешь по ней

<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>

когда могла бы отрисовать всего лишь

<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></li>
      <li class="menu-link text-or-20"><a href="">Dropdown 2 </a></li>
    </ul>

а если например пользователь нажал на Dropdown 1, то отрисовываешь вложенный уровень
может так понятнее станет, что я имею ввиду ? и анимацию к этой шляпе прикрути

Answer 2

[Evhar]

Сама нашла решение
Вдруг кому-то пригодится

document.addEventListener('DOMContentLoaded', () => {
    const menuItems = document.querySelectorAll('.menu-item');
    const backButton = document.getElementById('backButton');
    let depth = 0;

    menuItems.forEach(item => {
        item.addEventListener('click', function(event) {
            event.preventDefault();
            const submenu = this.nextElementSibling;

            if (submenu) {
                if (depth === 0) {
                    backButton.style.display = 'block';
                }
                depth++;
                submenu.classList.add('active');
            }
        });
    });

    backButton.addEventListener('click', () => {
        const activeSubmenus = document.querySelectorAll('.submenu.active');

        if (activeSubmenus.length > 0) {
            activeSubmenus[activeSubmenus.length - 1].classList.remove('active');
            depth--;

            if (depth === 0) {
                backButton.style.display = 'none';
            }
        }
    });
});

<button id="backButton" style="display: none;">Назад</button>
	<nav class="nav">
        <ul id="menu" class="menu">
            <li>
                <a href="#" class="menu-item">Услуги</a>
                <ul class="submenu">
                    <li>
                        <a href="#" class="menu-item">Подпункт 1-1</a>
                        <ul class="submenu">
                            <li><a href="#" class="menu-item">Подпункт 1-1-1</a></li>
                            <li><a href="#" class="menu-item">Подпункт 1-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="menu-item">Подпункт 1-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="menu-item">Наши проекты</a>
                <ul class="submenu">
					<li>
                        <a href="#" class="menu-item">Подпункт 2-1</a>
                        <ul class="submenu">
                            <li><a href="#" class="menu-item">Подпунк-2-1</a></li>
                            <li><a href="#" class="menu-item">Подпункт-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="menu-item">Подпункт 2-2</a></li>
                </ul>
            </li>
			<li>
                <a href="#" class="menu-item">Полезная информация</a>
                <ul class="submenu">
					<li>
                        <a href="#" class="menu-item">Подпункт 2-1</a>
                        <ul class="submenu">
                            <li><a href="#" class="menu-item">Подпунк-2-1</a></li>
                            <li><a href="#" class="menu-item">Подпункт-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="menu-item">Подпункт 2-2</a></li>
                </ul>
            </li>
        </ul>
        
    </nav>

.menu {
  background: red;
  height: 100vh;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-item {
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: -0.03em;
  color: #222;
  border-bottom: none;
}
.submenu {
  display: none;
  width: 100%;
  position: fixed;
  top: 30px;
  left: 0;
  z-index: 10;
  background: red;
  height: 100vh;
}

.active {
  display: block;
}

Comments

[Eduard Larcev]

Тогда отметь свое сообщение как "Решение"