Помогите как закрыть меню

Question

Помогите решить проблему открыть получается а закрыть нет)

const burgerBtn = document.getElementById('burger-btn');
const burger = document.createElement('div');

function burgerLinkOpen() {
  const Mydiv = document.getElementById('burger-menu')
  burger.classList.add('menu-link');
  burger.insertAdjacentHTML('afterbegin', `
    <span class="close-btn">&times;</span>
    <ul>
        <li><a href="#" class="link-menu">Главная</a></li>
        <li><a href="#" class="link-menu">Обо мне</a></li>
        <li><a href="#" class="link-menu">Мои проекты</a></li>
        <li><a href="#" class="link-menu">Соц Сети</a></li>
    </ul>
    `);

  Mydiv.appendChild(burger);
  return burger
};

burgerBtn.onclick = () => {
  burgerLinkOpen()
};

* {
  margin: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0;
}

ul {
  list-style: none;
}

li {
  margin-top: 10px;
}

li:hover {
  transform: scale(1.2);
}

body {
  background: #eee;
}

.container {
  margin: 100px 200px;
}

.burger-line {
  width: 50px;
  height: 50px;
}

.burger-btn {
  border: 1px solid black;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.menu-line {
  width: 25px;
  height: 3px;
  background: #333;
  margin: 15px 13px;
}

.menu-link {
  position: fixed;
  margin: 100px 200px;
  width: 200px;
  height: 250px;
  background: #fff;
  border-radius: 25px;
  border: 3px solid #000;
}

.link-menu {
  padding: 0 20px;
  font-size: 24px;
  font-weight: 600;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #000;
  text-decoration: none;
}

.menu-link ul {
  margin-top: 40px;
}

.menu-link li {
  transition: .5s ease;
}

.close-btn {
  font-size: 40px;
  cursor: pointer;
  padding: 5px 15px;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="burger-menu" id="burger-menu">
      <div class="burger-line">
        <button class="burger-btn" id="burger-btn">
                    <div class="menu-line"></div>
                    <div class="menu-line"></div>
                </button>
      </div>
    </div>
  </div>
  <script src="app.js"></script>
</body>

</html>

Answer 1

const burgerBtn = document.getElementById('burger-btn');
const burger = document.createElement('div');

function burgerLinkOpen() {
  const Mydiv = document.getElementById('burger-menu')
  burger.classList.add('menu-link');
  burger.insertAdjacentHTML('afterbegin', `
    <span class="close-btn" onclick="closeMenu()">&times;</span>
    <ul>
        <li><a href="#" class="link-menu">Главная</a></li>
        <li><a href="#" class="link-menu">Обо мне</a></li>
        <li><a href="#" class="link-menu">Мои проекты</a></li>
        <li><a href="#" class="link-menu">Соц Сети</a></li>
    </ul>
    `);

  Mydiv.appendChild(burger);
  return burger
};

burgerBtn.onclick = () => {
  burgerLinkOpen()
};

function closeMenu() {
  var menu = document.querySelector('.menu-link');
  menu.innerHTML = '';
  menu.parentNode.removeChild(menu);
}

* {
  margin: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0;
}

ul {
  list-style: none;
}

li {
  margin-top: 10px;
}

li:hover {
  transform: scale(1.2);
}

body {
  background: #eee;
}

.container {
  margin: 100px 200px;
}

.burger-line {
  width: 50px;
  height: 50px;
}

.burger-btn {
  border: 1px solid black;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.menu-line {
  width: 25px;
  height: 3px;
  background: #333;
  margin: 15px 13px;
}

.menu-link {
  position: fixed;
  margin: 100px 200px;
  width: 200px;
  height: 250px;
  background: #fff;
  border-radius: 25px;
  border: 3px solid #000;
}

.link-menu {
  padding: 0 20px;
  font-size: 24px;
  font-weight: 600;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #000;
  text-decoration: none;
}

.menu-link ul {
  margin-top: 40px;
}

.menu-link li {
  transition: .5s ease;
}

.close-btn {
  font-size: 40px;
  cursor: pointer;
  padding: 5px 15px;
}

<div class="container">
  <div class="burger-menu" id="burger-menu">
    <div class="burger-line">
      <button class="burger-btn" id="burger-btn">
        <div class="menu-line"></div>
        <div class="menu-line"></div>
      </button>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Помогите как закрыть меню

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