Как сделать выпадающее меню переключающееся по клику?

@trofey2 · Регистрация: 28.12.2015

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

мне сказали тут что делать такое меню через Input неправильно, лучше с js
подскажите тогда как его сделать с js? еще хотелось бы чтобы оно закрывалось по клику кроме того

@sad67man · 10.12.2025, 14:33

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

подложка это все что кроме выскакивающего меню?

Это отдельный div. Он отображается сзади меню и покрывает весь сайт с размытием.

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

и как дать класс ей?

HTML5
1
<div class="main-menu__layout"></div>

@trofey2 · 10.12.2025, 14:44 **[ТС]**

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

Это отдельный div. Он отображается сзади меню и покрывает весь сайт с размытием.

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

@sad67man · 10.12.2025, 15:38

1) вы div не закрыли

HTML5
1
2
<body>
  <div class="main-menu__layout"></div>

Либо не нужно им ничего оборачивать - он просто должен быть отдельным пустым блоком.

2) css для него не прописали - его нужно расположить поверх всего сайта

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.main-menu__layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000052;
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: none;
}
 
html.is-menu-open .main-menu__layout {
  display: block;
}

Тогда для самого выпадающего меню z-index Тоже нужно повысить, чтоб он отображался поверх подложки.

Так как подложка расположена отдельно от меню, то и js код можно упростить

JavaScript
1
2
3
$(".main-menu__layout").on('click', function() {
  $('html').removeClass('is-menu-open');
})

Нам уже не нужно проверять куда произошел клик, ведь события всплывают по DOM-дереву, и при такой структуре при клике по меню - событие до подложки не дойдет.

Добавлено через 32 минуты
trofey2, Посмотрел, как на сайте референсе сделана анимация.

Блок с меню всегда показывается, просто сдвинуто за пределы сайта через свойство transform: translateX

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#myDropdown2 {
  width: 300px;
  top: 0;
  bottom: 0;
  position: fixed; 
  flex-direction: column;
  display: flex;
  transform: translateX(-100%);
  transition: translateX, 0.5s;
  z-index: 1100;
}
 
html.is-menu-open #myDropdown2 {
  transform: translateX(0);
}

А у подложки анимируется свойство opacity, чтоб она работала - блок скрывается не через display: none, а через visibility: hidden, т.е.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.main-menu__layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000052;
  backdrop-filter: blur(5px);
  z-index: 1000;
  transition: opacity .5s;
 
  visibility: hidden;
  opacity: 0;
}
 
html.is-menu-open .main-menu__layout {
  opacity: 1;
  visibility: visible;
}

@trofey2 · 10.12.2025, 17:18 **[ТС]**

sad67man, спасибо, сделал как вы написали. только у меня блюр идет не на все кроме меню, а вообще на весь экран и соответственно клик по меню заблюренному тоже его закрывает. как это поправить?

а понял, добавил вашу анимацию и все заработало

@trofey2 · 10.12.2025, 17:20 **[ТС]**

еще тогда остается вопрос как сделать чтобы крестик закрытия меню был виден на заблюренном фоне?

@sad67man · 10.12.2025, 17:20

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

спасибо, сделал как вы написали

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

Тогда для самого выпадающего меню z-index Тоже нужно повысить, чтоб он отображался поверх подложки.

Видимо не все сделали.

@trofey2 · 10.12.2025, 17:24 **[ТС]**

sad67man, еще тогда остается вопрос как сделать чтобы крестик закрытия меню .cross был виден на заблюренном фоне?
пробовал ему z-index поднять но все равно не видно

@sad67man · 10.12.2025, 17:51

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

sad67man, еще тогда остается вопрос как сделать чтобы крестик закрытия меню был виден на заблюренном фоне?
пробовал ему z-index поднять но все равно не видно

У #myDropdown2 нужно z-index ставить
И там у крестика прозрачный фон на черном все равно не будет виден. Нужно сделать, чтоб крестик был белым.

Добавлено через 21 минуту

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

а понял, добавил вашу анимацию и все заработало

И вижу крестик торчит - залезает на бургер.

@trofey2 · 10.12.2025, 17:58 **[ТС]**

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

JavaScript
1
2
$(".cross").on('click', function() {
  $('html').removeClass('is-menu-open');

так наверное неправильно, как добавить класс .cross к этому скрипту? -

JavaScript
1
2
3
$(".main-menu__layout").on('click', function() {
  $('html').removeClass('is-menu-open');
})

я просто не знаю как это правильно оформить...

@sad67man · 10.12.2025, 18:06

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

так наверное неправильно, как добавить класс .cross к этому скрипту? -

Ну я бы не сказал. что это прям неправильно. Но можно сократить

JavaScript
1
2
3
$(".main-menu__layout, .cross").on('click', function() {
  $('html').removeClass('is-menu-open');
})

Добавлено через 47 секунд
Это потому что код идентичный, но в будущем он может начать расходиться, тогда уже нужно будет разделять обратно)

@trofey2 · 10.12.2025, 18:16 **[ТС]**

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

@sad67man · 10.12.2025, 19:33

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

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

Нужно расширять область наведения на какой-нибудь родительский блок, так чтоб вне зависимости от движения стрелки область наведения не менялась.

Но вообще на сайте референсе движение стрелки происходит при наведении на пункт меню.

Можете сделать так

CSS
1
2
3
.menu-item:hover .arrow {
  transform: translate(10px, 0px);
}

Добавлено через 16 минут
trofey2, Но вообще - в мобильной версии же нет такого события как наведение. Поэтому на самом деле это лишено смысла.

Добавлено через 50 минут

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

так наверное неправильно, как добавить класс .cross к этому скрипту? -

а еще как я ранее указывал - можно добавить специальный класс, отвечающий ща поведение. К примеру

JavaScript
1
2
3
$(".js-menu-close").on('click', function() {
  $('html').removeClass('is-menu-open');
})

HTML5
1
<div class="main-menu__layout js-menu-close"></div>

HTML5
1
<img src="img/cross1.svg" class="cross js-menu-close">

@trofey2 · 12.12.2025, 14:04 **[ТС]**

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

Нужно расширять область наведения на какой-нибудь родительский блок, так чтоб вне зависимости от движения стрелки область наведения не менялась.

я обернул .arrow в контейнер .arrow-container прописал -

CSS
1
2
3
4
5
6
7
8
9
10
11
.menu-item:hover .arrow-container {
      transform: translate(30px, 0px);
    }
    .arrow-container {
      width: 50px;
      height: 50px;
      border: 1px solid black;
      position: absolute;
      left: 220px;
      top: 50px;
    }

но трясется еще больше...

Добавлено через 1 минуту

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

можно добавить специальный класс, отвечающий ща поведение

а это обязательно? вроде и так же работает

@sad67man · 12.12.2025, 18:16

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

но трясется еще больше...

Если делать анимацию при наведении на пункт меню, то уже оборачивать в .arrow-container не нужно. Главное суть, чтоб не дергалось - нужно чтоб не менялась область наведения. Это можно сделать либо так, либо так.

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

но трясется еще больше...

Вероятно не убрали старый hover

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

а это обязательно? вроде и так же работает

Не обязательно.
Если нужно допустим изменить верстку - есть риск повредить логику js. Тогда вам нужно знать какие классы важны а какие нет.
Разделение классов, отвечающие за поведение и отображение - позволяет их менять независимо друг от друга.
Тут сразу все видно, что все классы с приставкой js- отвечают за поведение.

@voraa · 12.12.2025, 18:30

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

Разделение классов, отвечающие за поведение и отображение

Слышал мнение, что не должно быть классов, которые не связаны с отображением (не используются в CSS). Просто для чистоты кода. Что бы не пришлось лезть в CSS для поиска, как элемент с этим классом отображается.
Если надо просто пометить как то элемент, что бы потом выбирать и работать с ним в js, то следует использовать data-* атрибуты.

@sad67man · 12.12.2025, 18:37

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

Что бы не пришлось лезть в CSS для поиска, как элемент с этим классом отображается.

Так в этом и суть разделения - классы с приставкой js-* не отвечают за отображение. Их не нужно искать в css, их там просто нет.

Добавлено через 3 минуты

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

Слышал мнение, что не должно быть классов, которые не связаны с отображением (не используются в CSS).

Ну вообще есть разные подходы. К примеру методология БЭМ - там пишутся классы вне зависимости от того - есть ли у элемента css или нет.

@voraa · 12.12.2025, 18:57

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

есть разные подходы.

Есть. Есть разумные, а есть не очень.

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

там пишутся классы вне зависимости от того - есть ли у элемента css или нет

Как в армии. Солдат должен быть в головном уборе, установленного образца (зимнем, летним...), независимо от погоды.
Не слишком разумно, но зато "порядок".

@trofey2 · 23.12.2025, 13:50 **[ТС]**

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

Если делать анимацию при наведении на пункт меню, то уже оборачивать в .arrow-container не нужно

там нужно чтобы была анимация при наведении на пункт меню и на стрелку

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

Вероятно не убрали старый hover

убрал

почему тогда трясется?

@sad67man · 23.12.2025, 14:14

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

почему тогда трясется?

А вы инспектором так и не пользуетесь?

Добавлено через 5 минут

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

почему тогда трясется?

Вы же наведение ставите на пункт меню, а он занимает не всю ширину. Это же видно при наведении..
Потому что у вас везде стоит display:flex - И ширина пункта берется по максимальной ширине из всех пунктов меню.
https://skrinshoter.ru/vZDWGVNGwA1?a

@trofey2 · 23.12.2025, 16:40 **[ТС]**

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

А вы инспектором так и не пользуетесь?

чуть чуть

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

Потому что у вас везде стоит display:flex - И ширина пункта берется по максимальной ширине из всех пунктов меню.

а как тогда без флекса это лучше расположить? всмысле как ему тогда дать всю ширину? при этом чтобы при наведении подсвечивалась только область где текст

Новые блоги и статьи Все статьи Все блоги /
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-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 230

	Как сделать выпадающее меню переключающееся по клику? 31.10.2025, 15:57. Показов 4488. Ответов 64 Метки нет (Все метки) мне сказали тут что делать такое меню через Input неправильно, лучше с js подскажите тогда как его сделать с js? еще хотелось бы чтобы оно закрывалось по клику кроме того 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 230
	10.12.2025, 17:20 [ТС]
	еще тогда остается вопрос как сделать чтобы крестик закрытия меню был виден на заблюренном фоне? 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 230
	10.12.2025, 17:24 [ТС]
	sad67man, еще тогда остается вопрос как сделать чтобы крестик закрытия меню .cross был виден на заблюренном фоне? пробовал ему z-index поднять но все равно не видно 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 230
	10.12.2025, 18:16 [ТС]
	еще вопрос я сделал после каждого пункта меню такую стрелочку которая двигается если на нее навести мышь, но иногда она начинает дергаться взад-вперед если на нее как-то не так навестись. как от этого избавится? 0