Исправить проблему с выпадением бургер меню

Question

Не понимаю как сделать, что бы меню открывалось или сворачивалось при нажатии на бургер.

function burgerMenu(selector)
{
    let menu = $(selector);
    let button = $('.burger-menu__button');
    let links = menu.find('.burger-menu__link');
    let overlay = menu.find('.burger-menu__overlay');

    button.on('click', (e) => 
    {
        e.preventDefailt();
        toggleMenu();
    });

    links.on('click', () => toggleMenu());
    overlay.on('click', () => toggleMenu());

    function toggleMenu()
    {
        menu.toggleMenu('burger-menu_active');

        if(menu.hasClass('burger-menu_active'))
        {
            $('body').css('overflow', 'hidden')
        }
        else
        {
            $('body').css('overflow', 'visible');
        }
    }
}

burgerMenu('.burger-menu');

*
{
    margin: 0;
    padding: 0;
}

.burger-menu__button
{
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 30;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #2a2a2a;
}

.burger-menu__button:hover .burger-menu__lines
{
    filter: brightness(0.7)
}

.burger-menu__lines,
.burger-menu__lines::after,
.burger-menu__lines::before
{
    position: absolute;
    width: 40px;
    height: 6px;
    background-color: #fff;
}

.burger-menu__lines
{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.burger-menu__lines::before
{
    content: '';
    top: -12px;
}

.burger-menu__lines::after
{
    content: '';
    top: 12px;
}

.burger-menu_active .burger-menu__lines
{
    background-color: transparent;
}

.burger-menu_active .burger-menu__lines::before
{
    top:0;
    transform: rotate(45deg);
}

.burger-menu_active .burger-menu__lines::after
{
    top:0;
    transform: rotate(-45deg);
}

.burger-menu__nav
{
    padding-top: 80px;
    position: fixed;
    z-index: 20;
    display: flex;
    flex-flow: column;
    height: 100%;
    background-color: #2a2a2a;
    overflow: auto;
    left: -100%;
}

.burger-menu_active .burger-menu__nav
{
    left: 0;
}

.burger-menu__link
{
    padding: 30px;
    font-family: sans-serif;
    font-size: 32px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: bold;
    color: #fff;
}

.burger-menu__link:hover
{
    color: red;
}

.burger-menu__overlay
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.burger-menu_active .burger-menu__overlay
{
    display: block;
    /*background-color: rgba(0, 0, 0, 0.5);*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="burger-menu burger-menu_active">
            <a href="" class="burger-menu__button">
                <span class="burger-menu__lines"></span>
            </a>

            <nav class="burger-menu__nav">
                <a href="#" class="burger-menu__link"> steam </a>
                <a href="#" class="burger-menu__link">final fantasy XIV </a>
            </nav>

            <div class="burger-menu__overlay"></div>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

Answer 1

по коду я догадался о чем была речь, так что вот здесь Ваше решение проблемы.

пару комментариев с Вашего позволения

клик по бургеру не работал должным образом, потому что такого как e.preventDefailt() в JS нет.
думаю, коллеги меня поддержат, чтобы на будущее Вы предоставляли пример работы на каком-то ином ресурсе, к примеру, CodePen. так намного проще Вам помогать. и нам удобно, и больше шансов, что Вам помогут.
как по-мне, jQuery только усугубляет разработку и читаемость кода

function burgerMenu(selector) {
  let menu = $(selector);
  let button = $('.burger-menu__button');
  let links = menu.find('.burger-menu__link');
  let overlay = menu.find('.burger-menu__overlay');

  button.on('click', (e) => {
    e.preventDefault();
    toggleMenu();
  });

  links.on('click', () => toggleMenu());
  overlay.on('click', () => toggleMenu());

  function toggleMenu() {
    menu.toggleClass('burger-menu_active');
  }
}

burgerMenu('.burger-menu');

* {
  margin: 0;
  padding: 0;
}

.burger-menu__button {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 30;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #2a2a2a;
}

.burger-menu__button:hover .burger-menu__lines {
  filter: brightness(0.7)
}

.burger-menu__lines,
.burger-menu__lines::after,
.burger-menu__lines::before {
  position: absolute;
  width: 40px;
  height: 6px;
  background-color: #fff;
}

.burger-menu__lines {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.burger-menu__lines::before {
  content: '';
  top: -12px;
}

.burger-menu__lines::after {
  content: '';
  top: 12px;
}

.burger-menu_active .burger-menu__lines {
  background-color: transparent;
}

.burger-menu_active .burger-menu__lines::before {
  top: 0;
  transform: rotate(45deg);
}

.burger-menu_active .burger-menu__lines::after {
  top: 0;
  transform: rotate(-45deg);
}

.burger-menu__nav {
  padding-top: 80px;
  position: fixed;
  z-index: 20;
  display: flex;
  flex-flow: column;
  height: 100%;
  background-color: #2a2a2a;
  overflow: auto;
  left: -100%;
}

.burger-menu_active .burger-menu__nav {
  left: 0;
}

.burger-menu__link {
  padding: 30px;
  font-family: sans-serif;
  font-size: 32px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: bold;
  color: #fff;
}

.burger-menu__link:hover {
  color: red;
}

.burger-menu__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

.burger-menu_active .burger-menu__overlay {
  display: block;
  /*background-color: rgba(0, 0, 0, 0.5);*/
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="burger-menu burger-menu_active">
      <a href="" class="burger-menu__button">
        <span class="burger-menu__lines"></span>
      </a>

      <nav class="burger-menu__nav">
        <a href="#" class="burger-menu__link"> steam </a>
        <a href="#" class="burger-menu__link">final fantasy XIV </a>
      </nav>

      <div class="burger-menu__overlay"></div>
    </div>
  </div>
  <script src="js/index.js"></script>
</body>

</html>

БЛОГ НА HUSL

Исправить проблему с выпадением бургер меню

Ответы (1 шт):