Показать сообщение отдельно
  #3 (permalink)  
Старый 05.06.2022, 09:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

меню открытие пунктов
miha2020,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item>.arrow+ul {
            display: none;
        }

        .item.active>.arrow+ul {
            display: block;
        }

        .cross:after {
            content: "X";
            text-align: right;
            display: block;
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="menu-left">
        <li class="item"><a class="arrow" href="/test/test/">Пример</a>
            <ul class="subs">
                <span class="cross"></span>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            </ul>
        </li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a>
            <ul class="subs">
                <span class="cross"></span>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
                <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            </ul>
        </li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
        <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    </ul>
    <script>
        let dropdown = document.querySelectorAll('.menu-left>li.item');
        let menu = document.querySelector('.menu-left');
        let mediaQuery = window.matchMedia('(min-width: 768px)');
        console.log(mediaQuery);
        ['mouseover', 'click'].forEach(e => {
            menu.addEventListener(e, function(e) {
                let arrow = e.target.matches('.item > .arrow');
                let close = e.target.matches('.item .cross');
                let li = e.target.closest('li.item');
                if (arrow && (mediaQuery.matches || e.type == 'click')) {
                    event.preventDefault();
                    dropdown.forEach(e => e == li ? e.classList.add('active') : e.classList.remove('active'))
                }
                if (close && e.type == 'click') li.classList.remove('active');
            });
        });
    </script>
</body>

</html>

Последний раз редактировалось рони, 05.06.2022 в 12:06.
Ответить с цитированием