Есть скрытое меню. Раскрывается оно по клику на кнопке.
При клике на кнопку, блоку меню присваивается класс menu_active
. Меню открывается и скрывается только при клике на кнопку <button>
.
$(window).load(function() {
$('.menu-button').on('click', function() {
$('.menu').toggleClass('menu_active');
});
});
.menu_active {
z-index: 1;
opacity: 1;
}
.menu {
z-index: -1;
width: 100%;
position: fixed;
left: 0px;
top: 80px;
padding-top: 16px;
padding-bottom: 16px;
}
.menu-button {
display: flex;
background-color: transparent;
border: none;
border-right: 1px solid rgba(81, 11, 186, 0.1);
border-left: 1px solid rgba(81, 11, 186, 0.1);
height: 80px;
width: 70px;
}
.menu-button-line {
width: 20px;
display: block;
height: 3px;
background-color: #89a9eb;
margin: 2px 0;
}
<button class="menu-button navbar_menu-button">
<span class="menu-button-line"></span>
<span class="menu-button-line"></span>
<span class="menu-button-line"></span>
</button>
<nav class="menu_nav">
<a href="#" class="menu_link">Главная</a>
<a href="#" class="menu_link">Каталог скинали</a>
<a href="#" class="menu_link">Этапы работ</a>
<a href="#" class="menu_link">Примеры работ</a>
</nav>
Как сделать, чтобы при клике на пункты меню (Главная, Каталог скинали ... ) меню скрывалось и кнопка менялась на Х
?