Всем доброго времени суток!
Такой вопрос. Сделал выезжающее сбоку меню и бургер-кнопку с анимацией и вроде бы все круто, но при нажатии на кнопку страница возвращается наверх, в чем может быть причина?
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Бургер меню</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="menu">
<div class="logo">
<a href="#"><img src="logo.png" alt=""></a>
</div>
<div class="menu_btn1">
<a href="#" class="menu_btn">
<span></span>
</a>
</div>
<nav class="menu_list">
<a href="#">Главная</a>
<a href="#">Классика</a>
<a href="#">Модерн</a>
<a href="#">Выполненные работы</a>
<a href="#">Отзывы</a>
<a href="#">Контакты</a>
</nav>
<div class="socialnetwork">
<h4>Мы в соц. сетях</h4>
<a href="#" class="insta"><i class="fab fa-instagram"></i> <span>Instagram</span></a>
<a href="#" class="tube"><i class="fab fa-youtube"></i> <span>YouTube</span></a>
<a href="#" class="vk"><i class="fab fa-vk"></i> <span>Вконтакте</span></a>
</div>
<div class="contacts">
<h4>Контакты</h4>
<ul>
<li><a href="#"><i class="fas fa-mobile-alt"></i> +7(915)260-95-40</a></li>
<li><a href="#"><i class="far fa-envelope"></i> info@afurniture.ru</a></li>
</ul>
</div>
</div>
<header>
</header>
<section id="sec1">
</section>
<section id="sec2">
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/common.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
min-width: 100%;
background: #8e44ad;
}
header {
height: 100vh;
}
section {
height: 100vh;
}
#sec1 {
background: #A3CB38;
}
#sec2 {
background: #D980FA;
}
.menu {
height: 100vh;
width: 25%;
background: #fff;
z-index: 999;
position: fixed;
transform: translateX(-100%);
transition: 0.5s;
box-shadow: inset -5px 5px 10px 0 rgba(0, 0, 0, 0.7);
}
.menu_active {
transform: translateX(0%);
}
.menu_btn1 {
position: absolute;
right: 0;
top: 0;
margin-right: -60px;
margin-top: 10px;
}
.menu_btn {
height: 50px;
width: 50px;
background: #fff;
border-radius: 50%;
display: block;
box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.7);
position: relative;
}
.menu_btn span,
.menu_btn span::before,
.menu_btn span::after {
position: absolute;
margin-top: -1px;
margin-left: -10px;
left: 50%;
top: 50%;
width: 20px;
height: 2px;
background: #2c3e50;
transition: 0.3s;
}
.menu_btn span::before,
.menu_btn span::after {
content: '';
}
.menu_btn span::before {
transform: translateY(-5px);
}
.menu_btn span::after {
transform: translateY(5px);
}
.menu_btn_active span:before {
transform: rotate(45deg);
}
.menu_btn_active span:after {
transform: rotate(-45deg);
}
.menu_btn_active span {
height: 0;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
height: 10%;
}
.menu_list {
height: 40%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.menu_list a {
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
width: 100%;
text-align: center;
color: #222;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu_list a:hover {
background: rgba(0, 0, 0, 0.6);
color: #fff;
}
.socialnetwork {
text-align: center;
height: 25%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.socialnetwork h4 {
text-align: center;
font-weight: 700;
}
.socialnetwork a {
font-size: 30px;
display: flex;
flex-direction: row;
}
.socialnetwork a span {
font-size: 25px;
}
.insta {
color: #8e44ad;
}
.insta:hover {
color: #8e44ad;
}
.tube {
color: #c0392b;
}
.tube:hover {
color: #c0392b;
}
.vk {
color: #0652DD;
}
.vk:hover {
color: #0652DD;
}
.socialnetwork a:hover {
text-decoration: none;
}
.contacts {
text-align: center;
height: 25%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contacts ul {
padding: 0;
}
.contacts ul li {
display: block;
}
.contacts h4 {
text-align: center;
font-weight: 700;
}
.contacts ul li a {
color: #222;
font-size: 20px;
font-weight: 700;
color: #1B1464;
}
.contacts ul li a:hover {
text-decoration: none;
}
$('.menu_btn').on('click', function(e){
e.preventDefault;
$('.menu_btn').toggleClass('menu_btn_active');
$('.menu').toggleClass('menu_active');
})
Простой
