Клик на меню - показать меню. Клик на закрыть - скрыть меню

@Николай16 · Регистрация: 13.12.2015

Студворк — интернет-сервис помощи студентам

Добрый день
Задача такая - на десктоп есть кнопка МЕНЮ

При клике не МЕНЮ появляется лист меню (добавлениям класса, display: flex;) и кнопка Х (закрыть меню)

При клике на Х (закрыть меню) к листу меню (удаляем класс, ставим display: none;) Появляется ситуация на десктопе - (стоит только кнопка МЕНЮ, лист меню и Х не видно)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<header>
        <div class="header-row">
            
            <div class="header__logo"><img src="https://www.cyberforum.ru/images/icons/header-logo.png" alt=""></div>
            <div class="menu">
                <div class="menu-title">Меню</div>
                <div class="menu-btn">===</div>
            </div>
            <div class="menu_list">
                <div class="menu-item">Главная</div>
                <div class="menu-item">Готовый бетон</div>
                <div class="menu-item">Раствор</div>
                <div class="menu-item">Плиты перекрытия</div>
                <div class="menu-item">Фундаментные блоки</div>
                <div class="menu-item">Кольца колодцев</div>
                <div class="menu-item">Прайс</div>
                <div class="menu-item">Контакты</div>
                
            </div>
            <div class="menu-close">X</div>
        </div>
        <div class="header-title">
                Завод железобетонных изделий
            </div>
            <div class="header-bottom"></div>
    </header>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var menu=document.getElementsByClassName(".menu");
var menu_list=document.getElementsByClassName(".menu_list");
var close=document.getElementsByClassName(".menu-close");
 
menu=addEventListener("click", function () {
    menu_list.style.display="flex";
    menu_list.classList.add("header__menu__show");
})
 
close=addEventListener("click", function() {
    menu_list.style.display="none";
    menu_list.classList.remove("header__menu__show");
})

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
header {
    position: relative;
    max-width: 1366px;
    width: 100%;
    margin: 0 auto;
    display: block;
    background-image: url("../images/bg/header-bg.jpg");
}
 
.header-row {
    display: flex;
    justify-content: space-between;
}
 
.header__phone {
    color: #FFFFFF;
    display: flex;
}
.header__phone span {
 
}
.tel {
    display: flex;
    flex-direction: column;
}
 
/*menu*/
.menu{
    color: #fff;
    border: 1px solid red;
}
.menu_list {
    display: none;
    color: red;
}
 
.header__menu__show {
    display: flex;
    flex-direction: column;
    font-size: 30px;
    align-items: center;
    text-align: center;
    justify-content: center;
    line-height: 50px;
    width: 100%;
    height: 100vh;
    background-color: #2D3845;
 
}

@j2FunOnly · 17.07.2020, 12:16

getElementsByClassName() возвращает коллекцию элементов. Имя класса указывается без лидирующей точки.

addEventListener() - это метод, и вызывать его надо "через точку" на элементе: element.addEventListener(eventName, eventHandler);

Свойство display у вас уже прописано в CSS, дополнительно указывать его будет лишним.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var menu = document.getElementsByClassName("menu")[0];
var menu_list = document.getElementsByClassName("menu_list")[0];
var close = document.getElementsByClassName("menu-close")[0];
 
// menu=addEventListener("click", function () {
menu.addEventListener("click", function() {
  // menu_list.style.display="flex";
  menu_list.classList.add("header__menu__show");
})
 
// close=addEventListener("click", function() {
close.addEventListener("click", function() {
  // menu_list.style.display="none";
  menu_list.classList.remove("header__menu__show");
});

Новые блоги и статьи Все статьи Все блоги /
Создаем микросервисы с Go и Kubernetes golander 02.07.2025 Когда я только начинал с микросервисами, все спорили о том, какой язык юзать. Сейчас Go (или Golang) фактически захватил эту нишу. И вот почему этот язык настолько заходит для этих задач: . . .	C++23, квантовые вычисления и взаимодействие с Q# bytestream 02.07.2025 Я всегда с некоторым скептицизмом относился к громким заявлениям о революциях в IT, но квантовые вычисления - это тот случай, когда революция действительно происходит прямо у нас на глазах. Последние. . .	Вот в чем сила LM. Hrethgir 02.07.2025 как на английском будет “обслуживание“ Слово «обслуживание» на английском языке может переводиться несколькими способами в зависимости от контекста: * Service — самый распространённый. . .	Использование Keycloak со Spring Boot и интеграция Identity Provider Javaican 01.07.2025 Два года назад я получил задачу, которая сначала показалась тривиальной: интегрировать корпоративную аутентификацию в микросервисную архитектуру. На тот момент у нас было семь Spring Boot приложений,. . .	Содержание темы с примерами на WebGL 8Observer8 01.07.2025 Все примеры из книги Мацуды и Ли в песочнице JSFiddle Пример выводит точку красного цвета размером 10 пикселей на WebGL 1. 0 и 2. 0 WebGL 1. 0. Передача координаты точки из главной программы в. . .
Основы WebGL. Простой треугольник 8Observer8 01.07.2025 Простой треугольник без трансформаций. Для трансформаций можно использовать glMatrix, как в примере: https:/ / plnkr. co/ edit/ qT6ZTwvncLPRamK5?preview На русском: . . .	Полиглотные микросервисы на C# и .NET ArchitectMsa 30.06.2025 Полиглотная архитектура появилась не из желания усложнить жизнь разработчикам. Она родилась из практической необходимости решать разные задачи наиболее эффективным способом. В одном из проектов. . .	Стратегии кеширования Javaican 29.06.2025 Кеширование — это хранение часто запрашиваемых данных в быстром хранилище (обычно в памяти), чтобы не обращаться к более медленному первоисточнику. Казалось бы, все просто. Но за этой простотой. . .	Наблюдаемость приложений ASP.NET Core с OpenTelemetry, Prometheus и Grafana ArchitectMsa 29.06.2025 Наблюдаемость (observability) – это ключевое свойство современной системы, позволяющее понимать её внутреннее состояние на основе внешних данных. Если мониторинг отвечает на вопрос "что случилось?",. . .	Четыре главных модели отношений классов в с++ russiannick 28.06.2025 Продолжаю крестовый поход против c++. ideone. com/ юзаю для проверки валидности кода. Насчитал 4 модели отношений классов: одиночный класс, равноправные классы, слейв - мастер, терминатор. . . .

Клик на меню - показать меню. Клик на закрыть - скрыть меню

Решение