1

我创建了一个响应式侧边菜单，当我调整浏览器窗口大小时会出现该菜单。我的“问题”如下：当我调整浏览器窗口的大小时，这个侧边菜单会迅速出现和消失，没有点击相应的按钮......在其他情况下，一切正常，只有这个问题困扰着我。

有谁可以告诉我这个问题来自哪里？

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);
}

}

4

2 回答 2

0

The transition is causing a .4s delay.Remove the transition from the nav element and you wont get the delay

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

于 2018-05-17T16:44:15.457 回答
0

我相信 FOUC（无样式内容的闪烁）是由菜单在menu类定义中的定位以及随后的类定义的负边距声明引起的.nav。

尝试将负边距移动到.menu定义中：

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

或者也许只是将定义移到.nav定义之上menu。（虽然不清楚为什么要使用两个单独的类名来控制同一元素的布局。）

于 2018-05-17T16:49:53.297 回答