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

@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

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

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

Новые блоги и статьи Все статьи Все блоги /
Море в объективе kumehtar 06.07.2026 Хотел написать много проникновенных слов, но передумал. Оно само - говорит. Кто слышит тот слышит.	Оказывается, 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 и то, что с ним. . .

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

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