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

@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

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

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

Новые блоги и статьи Все статьи Все блоги /
Как надо было делать правильно - вообще не слушать ИИ, его дело - текст. Hrethgir 15.07.2026 А вообще надо было делать не так, чтобы не исправлять ошибку https:/ / www. cyberforum. ru/ blogs/ 223907/ 10996. html , правильно было : удалил кнопку, а потом добавил её. Всё это стресс конечно. Почему?. . .	Знаете, от чего появляется стресс? kumehtar 15.07.2026 Стресс появляется оттого, что вы, зная как поступить правильно, делаете наоборот. Ларри Уингет	Нас бьют, а мы крепчаем? Какая чушь! kumehtar 15.07.2026 Вот это вот бытующее мнение, что человек меняется только под действием проблем, всегда считал вредоносным. Поверь, от проблем у людей появляются не изменения, а нервное расстройство и ПТСР. А. . .	сукцессия 29. Переход от одних деревьев на другие делать более или менее вероятностным? anaschu 12.07.2026 Насколько смена типов микоризы — исключительное событие в двухвековой сукцессии? Оценка вероятности в пространстве параметров В текущей версии модели успешно реализован ключевой механизм. . .
сукцессия 27. Думаю, как переделывать уже написанную статью с планами на сукцессию. anaschu 12.07.2026 Анализ соответствия модели требованиям Реализованные компоненты: Механизм закисления почвы через протонную помпу Конкуренция между типами микориз pH как триггер сукцессии C/ P соотношение. . .	Сукцессия 26. Мат модель создана. anaschu 12.07.2026 Модель смены растительных сукцессий посредством управления грибами работает внутри небольшой ячейки почвы, восстанавливающейся после пожара, где ненадолго бывшее царство хвойных снова захватили. . .	Решил проблему с ошибкой пагинации сообщений с сервера на алгоритме обхода дерева "Эстафета хвоста". Hrethgir 12.07.2026 Проблема была в том, что удалялась именно новая кнопка, а не старая. Ни один ИИ не обнаружил это, а сам я смог только когда с работой стало попроще и когда заставил работать будущее автономное. . .	сукцессия 25. Хронология ошибок anaschu 12.07.2026 # От 50-тонного гриба до устойчивого леса: хроника ошибок при построении модели вековой сукцессии микоризы ## О чём эта статья В процессе построения ОДУ-модели (система дифференциальных. . .

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

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

@voral 3061 / 1463 / 265 Регистрация: 16.03.2008 Сообщений: 6,510 Записей в блоге: 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