Как закрыть бургер меню наводя на контент страницы?

Question

<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
    <span></span>
</label>

<ul class="menu__box">
    <li><a class="menu__item" href="{% url 'home' %}">Главная</a></li>
    <li><a class="menu__item" href="{% url 'about' %}">О нас</a></li>
    <li><a class="menu__item" href="{% url 'price' %}">Цена</a></li>
    <li><a class="menu__item" href="{% url 'contacts' %}">Контакты</a></li>
    <li><a class="menu__item" href="{% url 'coordinating' %}">Сотрудничество</a></li>
</ul>

Answer 1

const burger = document.getElementById("burger");
const content = document.getElementById("content");

function functionName() {
    burger.style.display = "none";
} 

content.addEventListener("mouseover", functionName);

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>

        <div class="hamburger-menu" id="burger">

            <input id="menu__toggle" type="checkbox" />
            <label class="menu__btn" for="menu__toggle">
                <span></span>
            </label>

            <ul class="menu__box">
                <li>
                    <a class="menu__item" href="{% url 'home' %}">Главная</a>
                </li>
                <li>
                    <a class="menu__item" href="{% url 'about' %}">О нас</a>
                </li>
                <li><a class="menu__item" href="{% url 'price' %}">Цена</a></li>
                <li>
                    <a class="menu__item" href="{% url 'contacts' %}"
                        >Контакты</a
                    >
                </li>
                <li>
                    <a class="menu__item" href="{% url 'coordinating' %}"
                        >Сотрудничество</a
                    >
                </li>
            </ul>

        </div>

        <div id="content">
            <h1 style="background-color: red">Content</h1>
        </div>
        
        <script src="/script.js"></script>
    </body>
</html>

БЛОГ НА HUSL

Как закрыть бургер меню наводя на контент страницы?

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