Скрытие меню по клику на крестик и пункт данного меню

@androv77 · Регистрация: 10.10.2022

Студворк — интернет-сервис помощи студентам

Есть скрытая менюшка. Она открывается по клику крестика на всю ширину и высоту экрана (мобильная версия).
По этому же крестику менюшка и закрывается.
Немогу сделать, чтобы менюшка закрывалась и по нажатию на любой пункт меню.
Так как сайт одностраничный, то пункты меню перемещают сраницу к нужному разделу. И меню при этом приходится закрывать самому по крестику. Ниже html и js

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="top-menu element-animation">
     <ul id="navbar">
       <li><a href="#object1">Find position</a></li>
       <li><a href="#object2">Categories</a></li>
       <li><a href="#object3">Skills</a></li>
       <li><a href="#object4">Customer</a></li>
     </ul>
     <div class="top-login">
  <div class="top-ligin-login">Login</div>
<div class="top-ligin-Trial">Free Trial</div>
  </div>
     </div>

JavaScript
1
2
3
4
5
6
7
let menuBtn = document.querySelector('.menu-btn');
let menu = document.querySelector('.top-menu');
 
menuBtn.addEventListener('click', function(){
    menuBtn.classList.toggle('active');
    menu.classList.toggle('active');
})

Необходимо что бы по клику пункта меню ему присваивался класс 'active', а у крестика (menuBtn) этот класс удалялся.

@AlexZaw · 04.05.2023, 15:46

Сообщение от androv77

Необходимо что бы по клику пункта меню ему присваивался класс 'active'

Поскольку вы не уточнили что именно является пунктом меню (li или ссылка) и не привели css который помог бы это понять, то предположу, что пункт меню это li.

Сообщение от androv77

а у крестика (menuBtn) этот класс удалялся.

Я так понимаю что класс active нужно удалять не только у крестика, но и у самого меню?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let menuBtn = document.querySelector(".menu-btn");
let menu = document.querySelector(".top-menu");
let navList = document.querySelector("#navbar");
 
menuBtn.addEventListener("click", function () {
  menuBtn.classList.toggle("active");
  menu.classList.toggle("active");
});
 
navList.addEventListener(
  "click",
  function (e) {
    e.preventDefault();
    const navItem = e.target.closest("li");
    if (navItem) {
      for (child of navList.children) {
        child.classList.remove("active");
      }
      navItem.classList.add("active");
      menuBtn.classList.remove("active");
      menu.classList.remove("active");
    }
  }
);

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

Скрытие меню по клику на крестик и пункт данного меню

Решение