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

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

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

Новые блоги и статьи Все статьи Все блоги /
Оказывается, Unreal Engine позволяет качество на порядки выше, чем было в Lineedge Etyuhibosecyu 05.07.2026 Жаль, конечно, что я не узнал об этом, пока Lineedge существовала, а то бы Noname2331 написал, что волки превращаются в пиксельную кашу, а я бы его попросил скачать какую-нибудь бриллиантовую или Pro. . .	Doom для терминала без стрельбы и монстров. 3D Raycasting на ascii. dcc0 05.07.2026 Попросил нейронную сеть deepai. org написать рейкастинг 3D с библиотекой ncurses для Linux. Чтобы можно было ходить на стрелочки. Чтобы стены были отрисованы символами. Справилась. Первый вариант. . .	Установка статуса документа по условию Maks 05.07.2026 Алгоритм из решения ниже реализован на нетиповом документе "НарядПутевка" разработанного в КА2. Задача: в табличной части "Материалы" документа при записи автоматически устанавливать статус. . .	Сезонность и суточность закисления почв anaschu 04.07.2026 200 часов это все равно моловато. Есть ситуации, но нестандартные, когда смена происходит за 5 лет. Но обычно это 50 лет и более. Наверное, закисление почвы происходит сезонно в средней. . .
В чем ценность человеческого опыта в глобальном смысле? kumehtar 03.07.2026 Возможно, ценность человека не в том, что он однажды достигает мудрости, а в том, что он становится носителем карты пути. Он знает не только истину, но и последовательность внутренних изменений,. . .	интеграция AnyLogic с самописным REST API и переход на Odoo anaschu 03.07.2026 Успешная интеграция AnyLogic с самописным REST API и переход на промышленную Odoo WMS Сегодня проделал огромный путь от простой симуляции физических процессов до построения полноценной. . .	Поиск всех путей на ориентированном графе. Linux dcc0 02.07.2026 Переработка старого кода из моей статьи. Через несколько переработок от PHP кода к C89 (надеюсь, 89). Но довольно запутанно получилось. Код для Linux. Но если убрать time и то, что с ним. . .	Сам себя обучал rest api anaschu 02.07.2026 Педагогический лайфхак: Почему чистый REST API для ученика намного круче, чем готовые библиотеки Когда мы отказались от капризного JAR-файла AnyLogic и переписали код на стандартный HttpClient,. . .

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

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