Answer the question
In order to leave comments, you need to log in
How to make burger menu auto close?
how to add java script code so that the vertical pop-up menu burger when clicking on the anchor links automatically goes back and hides?
Thank you in advance!!!
<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');
})
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question