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

Question

[Alex ALex]

Добрый день. Подскажите пожалуйста при нажатии кнопки ок (то есть на кнопку гамбургер) как сделать так чтоб сработал этот класс nan .active кнопка у меня бургер с классом гамбургер?

.nav.active {
    -webkit-clip-path: circle(75% at 175px 50vh);
    clip-path: circle(75% at 175px 50vh);
}

Answer 1

[lamer350]

.nav:active

Comments

[Alex ALex]

Хорошо там отпечатка а как сделать вы не написали.... И

[lamer350]

Alex ALex, это не опечатка, изучайте псевдоклассы. JS там вовсе не нужен

[hesrun]

lamer350, оке, но тогл не работает в этом свойстве. Чтоб сделать обратное, должен потерятся фокус, а не повторный клик произойти... Или я не прав?

Answer 2

[Руслан Дорофеев]

Так попробуйте: .gamburger - это ваш класс, если не так поправьте
.gamburger:active {
-webkit-clip-path: circle(75% at 175px 50vh);
clip-path: circle(75% at 175px 50vh);
}

Comments

[Alex ALex]

Нет смотрите там есть див с классом .hamburger и я хочу что бы при нажатие на этот див сработала этот стиль который я написал наверху с классом .nav.active и как это реализовать в js?

[Руслан Дорофеев]

Alex ALex, ну он должен сработать если заменить мой .gamburger на .hamburger, но это не через js это css ну если нужно через js и подключен jQuery, то по моему $(".hamburger").addClass("nav.active");

[Руслан Дорофеев]

Alex ALex, только это если этот стиль еще где то лучще добавить в диа id="hamburger" и изменить . на # $("#hamburger").addClass("nav.active");

Answer 3

[Марат Гарифуллин]

jQuery

$('.burger').on('click', () => { $('nav').addClass('active'); }

Comments

[Alex ALex]

Смотрите а те классы куда вписывать? на Css ке? и вызвать так как вы написали?

[Марат Гарифуллин]

Alex ALex, да.

И нужно будет прописать код на убирание этого класса, например, при клике в любую область кроме меню

[tyzberd]

если на jQuery то лучше без стрелочной функции, т.к jQuery поддерживает браузеры IE, а этим убили поддержку.

[Alex ALex]

magarif, Я вас не понял если написать в css то она работает но ой как все тут запутанно я вам напишу вечеров и скину код по подробнее рассмотрим хорошо спасибо за помогаете) я вам объясню суть задачи..