Выпадающее меню или модальное окно?

Question

Я только начинаю учить javascript, и мне задали задание сделать так, чтобы при нажатии на кнопку у меня появлялось меню на весь экран. Я много пробовал, пытался из интернета взять пример и перестроить под себя, не получается. Даже не знаю, что делать...Работаю в vs code, если это имеет значение. Можете, пожалуйста, написать пример такого окна? Спасибо за ответы, у меня получилось сделать выпадающее меню!)

Answer 1

посмотри тут?

https://freefrontend.com/css-dropdown-menus/

https://freefrontend.com/css-off-canvas-menus/

https://freefrontend.com/css-fullscreen-menus/

тут есть неколько вариаций меню

Answer 2

//простейшая реализация без лишних деталей
const modalButton = document.querySelector('.modal-button')
const modal = document.querySelector('.modal')

modalButton.addEventListener('click', () => {
  modal.classList.toggle('open')
})

modal.addEventListener('click', () => {
  modal.classList.remove('open')
})

.modal {
  display: none;
  width: 300px;
  height: 300px;
  background-color: #888;
}

.open {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>modal</title>
  </head>
  <body>
    <div class="modal">
      <div>
        <h1>Hello</h1>
      </div>
    </div>
    <button class="modal-button">open</button>
  </body>
</html>

БЛОГ НА HUSL

Выпадающее меню или модальное окно?

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