Медиа-запросы - Отзывчивое боковое меню появляется и быстро исчезает, когда я изменяю размер окна - PullRequest
Новая
       6

Медиа-запросы - Отзывчивое боковое меню появляется и быстро исчезает, когда я изменяю размер окна

0 голосов
/ 17 мая 2018

Я создал адаптивное боковое меню, которое появляется при изменении размера окна браузера. Моя "проблема" заключается в следующем: когда я изменяю размер окна браузера, это боковое меню появляется и быстро исчезает, не нажимая на соответствующую кнопку ... В другом случае все работает отлично, меня беспокоит только эта проблема.

Кто-нибудь может сказать мне, откуда эта проблема? 

var btn = document.querySelector(".toggle-btn");
var nav = document.querySelector(".nav");

btn.addEventListener("click", function () {
    btn.classList.toggle("nav-open");
    nav.classList.toggle("nav-open");
});
@media screen and (max-width: 1300px) {

    html,
    body {
        margin: 0px;
        padding: 0px;
    }

    .toggle-btn {
        height: 30px;
        width: 30px;
        position: relative;
        float: right;
        top: 10px;
        right: 20px;
        cursor: pointer;
        z-index: 1000;
    }

    .toggle-btn span {
        height: 3px;
        background-color: #2c3e50;
        width: 100%;
        position: absolute;
        top: 20px;
        left: 0;
        transition: .4s;
    }

    .toggle-btn span:before {
        content: '';
        height: 3px;
        background-color: #2c3e50;
        width: 100%;
        position: absolute;
        top: -10px;
        left: 0;
        transition: .4s;
    }

    .toggle-btn span:after {
        content: '';
        height: 3px;
        background-color: #2c3e50;
        width: 100%;
        position: absolute;
        top: 10px;
        left: 0;
        transition: .4s;
    }

    .menu {
        height: 1000px;
        background-color: #eeebec;
        width: 250px;
        position: absolute;
        right: 0px;
    }

    .menu a {
        color: text-align: center;
        display: block;
        padding-top: 30px;
    }

    .nav {
        margin-right: -250px;
        transition-duration: 0.4s;
    }

    .nav-open {
        margin-right: 0px;
        transition-duration: 0.4s;
    }

    .toggle-btn.nav-open span {
        background: rgba(0, 0, 0, 0);
    }

    .toggle-btn.nav-open span:before {
        top: 0;
        transform: rotate(45deg);
    }

    .toggle-btn.nav-open span:after {
        top: 0;
        transform: rotate(-45deg);
    }
}
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Toggle Button</title>
    <link rel="stylesheet" href="btn.css">
</head>

<body>
    <div class="toggle-btn">
        <span></span>
    </div>

    <div class="menu nav">
        Blah
        Blah
        Blah
    </div>

    <script src="btn.js"></script>
</body>

</html>
    transform: rotate(45deg);
}

.toggle-btn.nav-open span:after {
    top: 0;
    transform: rotate(-45deg);
}

}

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Я полагаю, что FOUC (флэш-содержимое нестандартного содержимого) вызывается позиционированием меню в определении класса menu и последующим объявлением отрицательного поля определения класса .nav.

Попробуйте переместить отрицательное поле в определение .menu: 

.menu {
    height: 1000px;
    background-color: #eeebec;
    width: 250px;
    position: absolute;
    right: 0px;
    margin-right: -250px; /* <---- */
}

Или, может быть, просто переместите определение .nav выше определения menu. (Хотя неясно, почему вы используете два отдельных имени класса для управления макетом одного и того же элемента.)

0 голосов
/ 17 мая 2018

Переход вызывает задержку в 4 секунды. Удалите переход из элемента nav, и вы не получите задержку

.nav {margin-right: -250px;длительность перехода: 0,4 с;// удаляем это}

...