Выпадающий список в навигационном меню на JS

Рейтинг: 0Ответов: 1Опубликовано: 18.01.2023

Только начинаю изучать JS, прорабатываю типовые задачи. Надо добавить раскрывающийся список к пунктам "О компании" и "Услуги". Изучила множество примеров на десятках сайтов и хоть убейте, не могу понять, как это реализовать в данном примере. Просьба, помочь с данным вопросом.

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: 300;
}
.menu {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  background: gray;
  box-sizing: border-box;
  padding: 10px 20px;
  margin: 0;
}

.menu__link {
  text-decoration: none;
  color: #000;
}

.menu__link:hover {
  color: whitesmoke;
}

.menu__item {
  position: relative;
}

.menu_sub {
  display: none;
  position: absolute;
  padding: 10px 10px 0 10px;
}

.menu_sub .menu__item {
  margin-bottom: 10px;
}

.menu_active {
  display: block;
  left: -10px;
  top: 100%;
  min-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="logo__container">
            <a href="https://www.google.ru/" class="logo__link"></a>
        </div>
        <h1 class="header__title">
            Навигационное меню.
        </h1>
    </header>
    <ul class="menu menu_main">
        <li class="menu__item">
            <a href="https://www.google.ru/" class="menu__link">Главная</a>
        </li>
        <li class="menu__item">
            <a href="" class="menu__link"> О компании</a>
            <ul class="menu menu_sub menu_active">
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Клиенты</a>
                </li>
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Обслуживание</a>
                </li>
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Награды</a>
                </li>
            </ul>
        </li>
        <li class="menu__item">
            <a href="" class="menu__link" >Услуги</a>
            <ul class="menu menu_sub menu_active">
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Обучение</a>
                </li>
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Консультации</a>
                </li>
            </ul>
        </li>
        <li class="menu__item">
            <a href="https://www.google.ru/" class="menu__link">Контакты</a>
        </li>
    </ul>
    <script src="main.js"></script>
</body>
</html>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

Как вариант добавить менюшкам класс (has_sub) по которому будем определять есть ли у него подменю, чтобы ссылка не была кликабельной, и при клике на него вешать класс который будет открывать подменю.
P.s.: Обычно еще вешают событие на window на клик, и проверка по какому месту было кликнуто, если это не подменю, то закрывают все подменю

document.querySelectorAll('.has_sub').forEach(item => {
  item.addEventListener('click', event => {
event.preventDefault();
let target = event.currentTarget || event.target;
target.querySelector('.menu_sub')?.classList.toggle('menu_active')
  })
})
body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: 300;
}
.menu {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  background: gray;
  box-sizing: border-box;
  padding: 10px 20px;
  margin: 0;
}

.menu__link {
  text-decoration: none;
  color: #000;
}

.menu__link:hover {
  color: whitesmoke;
}

.menu__item {
  position: relative;
}

.menu_sub {
  display: none;
  position: absolute;
  padding: 10px 10px 0 10px;
}

.menu_sub .menu__item {
  margin-bottom: 10px;
}

.menu_active {
  display: block;
  left: -10px;
  top: 100%;
  min-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="logo__container">
            <a href="https://www.google.ru/" class="logo__link"></a>
        </div>
        <h1 class="header__title">
            Навигационное меню.
        </h1>
    </header>
    <ul class="menu menu_main">
        <li class="menu__item">
            <a href="https://www.google.ru/" class="menu__link">Главная</a>
        </li>
        <li class="menu__item has_sub">
            <a href="" class="menu__link"> О компании</a>
            <ul class="menu menu_sub">
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Клиенты</a>
                </li>
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Обслуживание</a>
                </li>
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Награды</a>
                </li>
            </ul>
        </li>
        <li class="menu__item has_sub">
            <a href="" class="menu__link" >Услуги</a>
            <ul class="menu menu_sub">
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Обучение</a>
                </li>
                <li class="menu__item">
                    <a href="https://www.google.ru/" class="menu__link">Консультации</a>
                </li>
            </ul>
        </li>
        <li class="menu__item">
            <a href="https://www.google.ru/" class="menu__link">Контакты</a>
        </li>
    </ul>
    <script src="main.js"></script>
</body>
</html>