как дописать java script код что бы вертикальная выезжающая бургер меню при нажатии на якорные ссылки автоматический обратно зашел и скрылся?
Заранее благодарю!!!
<div class="wrapper">
<div class="menu">
<a href="#" class="menu-btn"></a>
<nav class="menu-list">
<a href="#content">Главная</a>
<a href="#news">Новости</a>
<a href="#contacts">Контакты</a>
<a href="#portfolio">Портфолио</a>
</nav>
</div>
<div class="content" id="content">
<section class="main">
<h2>Главная</h2>
</section>
<section class="news" id="news">
<h2>Новости</h2>
</section>
<section class="contacts" id="contacts">
<h2>Контакты</h2>
</section>
<section class="portfolio" id="portfolio">
<h2>Портфолио</h2>
</section>
</div>
</div>
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.main {
background-color: #27ae60;
}
.news {
background-color: #9b59b6;
}
.contacts {
background-color: #3498db;
}
.portfolio {
background-color: #f1c40f;
}
.wrapper {
position: relative;
overflow-x: hidden;
}
.menu {
position: fixed;
left: 0;top: 0;
z-index: 99;
width: 30%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
transition: 0.5s;
transform: translateX(-100%);
}
.menu_active {
transform: translateX(0%);
}
.menu-list {
display: flex;
justify-content: space-around;
align-items: center;
height: 50%;
flex-direction: column;
}
.menu-list a {
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
}
.menu-btn {
width: 30px;
height: 30px;
background-color: #333;
position: absolute;
right: -35px;
top: 10px;
}
.content {
transition: 0.5s;
position: relative;
z-index: 0;
}
.content_active {
transform: translateX(30%);
}
$('.menu-btn').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('menu_active');
$('.content').toggleClass('content_active');
})
Спасибо за внимание!!!