What is the error, why does the page scroll to the top when you click on the "Burger Menu" button?

S

SCG132018-11-13 18:38:35

css

SCG13, 2018-11-13 18:38:35

Good day to all!
A question. I made a menu that slides out on the side and a burger button with animation and everything seems to be cool, but when you click on the button, the page returns to the top, what could be the reason?

<!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> [email protected]</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');
})

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Eugene Chefranov, 2018-11-13
@SCG13

$('.menu_btn').on('click', function(e){
  e.preventDefault();
  $('.menu_btn').toggleClass('menu_btn_active');
  $('.menu').toggleClass('menu_active');
})

forgot parentheses at preventDefault

A

azaza, 2018-11-13
@natojezlo

patamusho "#" gladiolus