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

@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 - И ширина пункта берется по максимальной ширине из всех пунктов меню.

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

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

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

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

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

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

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