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

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

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

Новые блоги и статьи Все статьи Все блоги /
Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .
Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .

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

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

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

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

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