Как менять стили кнопки при открытии меню (JQuery)?

Question

[Biff]

Имеется кнопка-бургер меню.
Само меню располагается в модальном окне, которое никак не связано с кнопкой в DOM.
Хочется сделать так, чтобы при открытом модальном окне с меню, кнопка-бургер превращалась в крестик.
Стили для кнопки готовы, но они не применяются к кнопке, когда активно модальное окно.

<a id="nf-menu" class="open-modal" href="#modalw-nf-menu" title="Меню">
	<div id="nf-menu-box">
		<div id="nf-menu-border">
			<hr id="menuline1">
			<hr id="menuline2">
			<hr id="menuline3">
		</div>
	</div>
</a>

if($('#nf-menu').hasClass('modalactive')) {
	$('#menuline2').hide(0);
	$('#menuline1').css({
		'transform': 'rotate(45deg)',
		'top': '3px'
	});
	$('#menuline3').css({
		'transform': 'rotate(-45deg)',
		'top': '-2px'
	});
} else {
	$('#menuline2').show(0);
	$('#menuline1').css({
		'transform': '',
		'top': ''
	});
	$('#menuline3').css({
		'transform': '',
		'top': ''
	});
}

Comments

[pjery3]

В поиск вбейте “бургер меню css”, из js там только навесить класс активности на сам бургер или на body.
Но зачем придумывать велосипеды? Учитесь брать готовые решения и адаптировать их под свои проекты. С уважением

Answer 1

[Vladislav]

Вам бы код ревью для начала кто нибудь провел, бургер меня в html так не строят, каким образом тут затесался hr? И кнопка меню это кнопка - button, то есть ты должен в button положить три span, для начала сделай так