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

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

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

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

@trofey2 · 25.11.2025, 14:26 **[ТС]**

Добавлено через 50 секунд

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

Вы неправильно сделали бургер. Это не dropdown. Я же выше все расписал. При клике по нему вы должны вешать класс на тег html

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

@sad67man · 25.11.2025, 14:50

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

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

Неправильно. Во-первых это разные вещи - нельзя их завязывать друг на друга. Захотели поменять меню, у вас поломался dropdown и наоборот - т.е. вы просто связываете себе руки, и это источник багов.

Подобные менюшки могут иметь совершенно разные структуры. Я просто исхожу из своего опыта - Проще вешать класс на html, так как при ее открытии может происходить множество изменений на всем сайте в целом (блокироваться скролл, блюриться, сайт может вообще куда-то уезжать и т.д. ) Т.е. это как 2 состояния сайта - когда меню открыто и когда меню закрыто.
И точно так сделано на сайте референсе - вы же посмотрите что происходит с тегом html, когда вы открываете меню.
https://skrinshoter.ru/vYl1nh92sXj?a

Мне лень все расписывать подробнейшим образом и все объяснять, у меня на это не хватит времени и нервов)
Возможно данную вещь можно реализовать 10-ю разными способами - я предлагаю один конкретный. Если вы будете делать как-то по другому, то мне трудно будет вам помочь.

@trofey2 · 27.11.2025, 14:38 **[ТС]**

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

Вы неправильно сделали бургер. Это не dropdown. Я же выше все расписал. При клике по нему вы должны вешать класс на тег html

я не совсем понял, вешать класс на боди это так? - .dropdown.active .dropbtn2 body { }

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

По данному классу через css показываете меню.

не совсем понял как это сделать

что мне сделать с сайтом чтобы было все как вы хотите?

@sad67man · 27.11.2025, 16:22

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

я не совсем понял, вешать класс на боди это так? - .dropdown.active .dropbtn2 body { }

Лучше на html - это делается через js.

.dropdown.active .dropbtn2 body { } - это что за селектор такой? body никак не может находиться внутри .dropdown

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

не совсем понял как это сделать

Вам нужно повесить обработчик на кнопку, можно это делать через onclick, но обычно это делают через классы.
Причем принято по возможности разделять классы, отвечающие за отображение и классы, отвечающие за поведение
К примеру

HTML5
1
<button class="menu__burger js-menu-btn"></button>

Класс menu__burger - отвечает за отображение

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.menu__burger {
  position: relative;
  border: none;
  background: transparent;
  width: 30px;
  height: 30px;
  transition: all .3s .15s;
  cursor: pointer;
}
.menu__burger::before,
.menu__burger::after {
  content: '';
  left: 3px;
  position: absolute;
  display: block;
  right: 3px;
  height: 2px;
  border-radius: 10px;
  background: #fff;
  transition: all .3s .15s;
}
.menu__burger::before {
  top: 5px;
  box-shadow: 0 9px 0 #fff;
}
.menu__burger::after {
  bottom: 5px;
}
html.is-menu-open .menu__burger::before {
  top: 14px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 rgba(0,0,0,0);
}
html.is-menu-open .menu__burger::after {
  bottom: 14px;
  transform: rotate(-45deg);
}

А класс js-menu-btn - отвечает за поведение

JavaScript
1
2
3
$('.js-menu-btn').click(function() {
  $('html').toggleClass('is-menu-open');
})

@voral · 28.11.2025, 11:50

Главное тут быть аккуратным. Если есть некая логика, которая эти кнопки перерисовывает (т.е. в какой-то момент времени они могут добавляться на страница при помощи js) то делегирование вполне себе разумный выход. а на кого вешать обработчик - вопрос конкретного проекта

@trofey2 · 01.12.2025, 13:27 **[ТС]**

sad67man, вроде все работает, только я не совсем понял, сейчас все работает как вы хотели? я понячалу onclick стер но без него не работает в результате сделал как было

еще вопрос хотел сделать чтобы как я хочу выскакивающее меню и там класс на нем class="menu__burger js-menu-btn", как в css на него чисто повесить что-то? там не получилось это сделать я переименовал на этом меню id и через него сделал, но как это через класс сделать?

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

@sad67man · 01.12.2025, 14:44

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

sad67man, вроде все работает, только я не совсем понял, сейчас все работает как вы хотели? я понячалу onclick стер но без него не работает в результате сделал как было

Нужно отталкиваться от класса html.is-menu-open

Это уже через css. Тут больше js не нужен.

@sad67man · 01.12.2025, 15:24

trofey2, Так же обратите внимание - на сайте референсе меню в шапке и мобильное меню - это один и тот же блок. Просто на десктопе некоторые элементы скрыты.

Вам нужно привести в порядок структуру html.
И скрипты пишутся в самом конце - перед закрывающим тегом </body>. Не надо их размещать посреди html кода.

@trofey2 · 01.12.2025, 16:45 **[ТС]**

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

на сайте референсе меню в шапке и мобильное меню - это один и тот же блок. Просто на десктопе некоторые элементы скрыты.

ОК добьюсь сначала чтобы уж когда это разные блоки работало, потом как один сделаю

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

Нужно отталкиваться от класса html.is-menu-open
Это уже через css. Тут больше js не нужен.

sad67man,

так, то есть я делаю так

CSS
1
2
3
html.is-menu-open #myDropdown2 {
          display: flex;
        }

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

@trofey2 · 03.12.2025, 15:10 **[ТС]**

sad67man, не подскажете?

@voraa · 03.12.2025, 16:34

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

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

При показе меню, вешаем на document обработчик, который срабатывает при клике вне меню. Он закрывает меню и отвязывается от document.

@sad67man · 03.12.2025, 16:45

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

При показе меню, вешаем на document обработчик, который срабатывает при клике вне меню. Он закрывает меню и отвязывается от document.

Тут меню открывается по классу на html, И технически я могу открыть меню добавив этот класс вручную через инспектор. И мне не очень нравится идея, что не будет обработчика на закрытие.

Я бы постарался избегать дополнительные телодвижения при открытии меню. Там же будет подложка с затемнением фона - можно на нее будет повесить обработчик.

@trofey2 · 03.12.2025, 16:52 **[ТС]**

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

Там же будет подложка с затемнением фона - можно на нее будет повесить обработчик

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

@voraa · 03.12.2025, 17:08

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

И технически я могу открыть меню добавив этот класс вручную через инспектор.

Зачем? Пользователь будет так делать?
Технически, через инспектор можно много чего сделать, и скрипт сторонний запустить.

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

Там же будет подложка с затемнением фона - можно на нее будет повесить обработчик.

Странная идея. Вы где нибудь такое видели - подложка для меню?
Обычно подложку делают для модальных окон.

Добавлено через 6 минут
Пользователь, кроме вашего, посещает еще 100500 сайтов. У них может быть разное содержание, но интерфейс примерно одинаковый. И пользователь прекрасно знает, как открыть меню, как закрыть меню... Не надо изобретать нестандартный интерфейс. Это введет пользователя в заблуждение. Как на автомобиле - все вроде разные, но интерфейс (руль, педали, рычаг переключения скоростей) у всех на одном и том же месте. И работает примерно одинаково. Что бы не доставлять пользователю лишних хлопот.

@sad67man · 03.12.2025, 17:17

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

Странная идея. Вы где нибудь такое видели - подложка для меню?
Обычно подложку делают для модальных окон.

Есть на сайте референсе, с которого автор копирует верстку. Я бы хотел максимально упростить код для автора. Добавлять/удалять события - слишком сложно.

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

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

Зачем? Пользователь будет так делать?
Технически, через инспектор можно много чего сделать, и скрипт сторонний запустить.

Ну а зачем делать что-то еще, если достаточно одного класса?) Пользователь тут не причем.

@voraa · 03.12.2025, 17:27

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

Добавлять/удалять события - слишком сложно.

Чего?

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

Ну а зачем делать что-то еще, если достаточно одного класса?

Но этот класс должен кто то ставить и снимать. И кто, как не обработчик события?

@sad67man · 03.12.2025, 18:50

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

Но этот класс должен кто то ставить и снимать. И кто, как не обработчик события?

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

Конечно проще повесить один обработчик на document и его не снимать. Не понимаю о чем спор.

Просто если вам не нравится, что этот обработчик будет срабатывать даже когда меню закрыто. То можно использовать тот факт, что у меню есть подложка и повесить обработчик на него. Тогда данный обработчик будет срабатывать только когда меню открыто.

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

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

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

есть куча статей по данному вопросу.
https://misha.agency/javascrip... menta.html
https://vallek.github.io/webde... ck-outside

Тут нужно иметь представление, как события всплывают по DOM-дереву. Вешаем обработчик на весь документ - все клики на странице до него будут доходить. И проверяем элемент по которому произошел клик (event.target) - принадлежит ли он меню.

JavaScript
1
2
3
4
5
6
7
let menu = document.querySelector('#myDropdown2');
 
$(document).on('click', function(event) {
    if (!menu.contains(event.target)) {
        $('html').removeClass('is-menu-open');
    }
})

Тут я использовал вариант с contains

Не знаю какая у вас сейчас структура, я использовал #myDropdown2 из ваших прошлых сообщений.

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

@trofey2 · 09.12.2025, 16:13 **[ТС]**

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

Нужно учитывать, что этот обработчик будет срабатывать при каждом клике, даже когда меню закрыто и каждый раз будет пытаться удалять этот класс

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

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

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

объясните пожалуйста как это сделать. что-то не догоняю

@sad67man · 09.12.2025, 16:27

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

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

Могу предположить, что он открывается и тут же закрывается. Вероятно селектор для меню нужно поправить. Я же не знаю какая у вас сейчас структура.

Добавлено через 4 минуты
trofey2, А нет. Тут получается так, что клик по гамбургеру - это же клик вне меню. Вот оно и закрывается.

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

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

объясните пожалуйста как это сделать. что-то не догоняю

Вместо $(document).on('click', - нужно указать вашу подложку.
К примеру $(".main-menu__layout").on('click', - смотря какой класс ему дадите.

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

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

нужно указать вашу подложку

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

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

смотря какой класс ему дадите

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

Новые блоги и статьи Все статьи Все блоги /
Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части 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 хоп хоп хоп хидахоп, а я кладую))

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

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

@voral 3061 / 1465 / 265 Регистрация: 16.03.2008 Сообщений: 6,512 Записей в блоге: 2
	28.11.2025, 11:50
	Главное тут быть аккуратным. Если есть некая логика, которая эти кнопки перерисовывает (т.е. в какой-то момент времени они могут добавляться на страница при помощи js) то делегирование вполне себе разумный выход. а на кого вешать обработчик - вопрос конкретного проекта 0

@sad67man 2605 / 1509 / 689 Регистрация: 23.08.2015 Сообщений: 3,841
	01.12.2025, 15:24
	trofey2, Так же обратите внимание - на сайте референсе меню в шапке и мобильное меню - это один и тот же блок. Просто на десктопе некоторые элементы скрыты. Вам нужно привести в порядок структуру html. И скрипты пишутся в самом конце - перед закрывающим тегом </body>. Не надо их размещать посреди html кода. Миниатюры 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 242
	03.12.2025, 15:10 [ТС]
	sad67man, не подскажете? 0