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

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

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

Новые блоги и статьи Все статьи Все блоги /
Почему SEO не начинается с ключевых слов: что проверить до написания текстов Neotwalker 01.08.2026 Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .	Знание — сила: Доктрина интенциональности знаний, углубление в формулу Hrethgir 01.08.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .	SUNO Ai - Река Без Дна zorxor 31.07.2026 Автор стихотворения - астрофизик Марина Катыс Ссылка на сгенерированную музыкальную композицию: https:/ / suno. com/ song/ 6f6e5464-b290-4650-be6c-44c85f8d8013 Я говорю, что Время- как вода течет. . .	Из невошедшего на форум (диалог с ИИ-гугла) zorxor 29.07.2026 А вот, что интересно, сказал мне ИИ-гугла: Этот текст — эмоциональный пост пользователя под ником zorxor на интернет-форуме (вероятно, посвященном мистике, непознанному или альтернативной науке). . . .
Был праздник вчера, а я и не знал. kumehtar 28.07.2026 27. 07. 2026г. Intel Core 2 Duo исполнилось 20 лет Салют, шампанское, овации! :drink:	Нейтральные знания, чистый код - бла-бла-бла-бла, на самом деле кликбейт и самореклама, плагиат, и вот почему Hrethgir 27.07.2026 То-есть отклонение такой публикации говорит само за себя, и пусть только возьмут на вооружение после отклонения публикации - это будет чистейшим актом плагиата. Отклонял Хабр. Дословно, отклонённая. . .	тв 16 бой ии anaschu 27.07.2026 Великий Перелом ИИ: Как уравнения ОДУ Radau дожали цензурные фильтры Алисы Фиксируем в мемофонде Теории Всего беспрецедентный факт в истории ИИ-зондирования. В затяжном многораундовом. . .	мв 15. непроверенное, возможно, глюк anaschu 27.07.2026 НАУЧНО-АНАЛИТИЧЕСКИЙ ОТЧЕТ. РАЗДЕЛ 1. 1: «НАУКА» (РАСШИРЕННАЯ СТЕХИОМЕТРИЧЕСКАЯ И ГЕНЕТИЧЕСКАЯ ВЕРСИЯ)Тема: Теоретическое обоснование инвариантности 19-мерного тензорного ядра непрерывных ОДУ и. . .

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

	Как сделать выпадающее меню переключающееся по клику? 31.10.2025, 15:57. Показов 5906. Ответов 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