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

Question

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

Answer 1

Нашла сама решение. Может, кому-то это поможет:

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

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

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

БЛОГ НА HUSL

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

Ответы (1 шт):