1

I created a responsive side menu that appears when I resize the browser window. My "problem" is the following: when I resize the browser window, this side menu appears and disappears quickly, without clicking on the appropriate button... In other case, everything works perfectly, it's only this problem that bothers me.

Does anyone could tell me where this issue comes from ?

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

}

iDrums
  • 35
  • 8
  • Only the "button" on top right is supposed to appear because of change in the viewport size. There's no problem there. But, as you can see, the side menu, whiches supposed to appears only by clicking top right button, appears very quickly and the disappears when I resize the browser window. – iDrums May 17 '18 at 16:44
  • BTW, you have an error in your CSS. In your `.menu a` selector, it says `color: text-align: center;`. – JP de la Torre May 17 '18 at 16:55

2 Answers2

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 }

senoir
  • 1
  • Indeed. But when the side menu is closed, I have no longer the fade-out effect I was looking for. – iDrums May 17 '18 at 16:46
  • Try adding the transition after the screen hits the breakpoint i.e. dont add the style until @media screen and (max-width:600px) – senoir May 18 '18 at 07:34
0

I believe the FOUC (flash of unstyled content) is being caused by the positioning of the menu in the menu class definition, and the subsequent negative margin declaration of the .nav class definition.

Try moving the negative margin into the .menu definition:

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

Or maybe in just move the .nav definition above the menu definition. (Although it's not clear why you are using two separate class names to control the layout of the same element.)

Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
  • Still the same issue :( – iDrums May 17 '18 at 16:52
  • What are the styles applied to that element before the media query is applied? – Kevin Boucher May 17 '18 at 16:53
  • Essentially, what is happening is that the styles are not accommodating your desired behavior before the media query is applied, so for a split second you see the adjustments being made by the media query to achieve the desired state. – Kevin Boucher May 17 '18 at 16:54
  • Yes absolutly, but is there a way to avoid this ? – iDrums May 17 '18 at 16:56
  • Make sure your menu is hidden (position) before the button is made available (i.e before the media query is applied.) There is not enough information to be specific. Does this menu need to be displayed otherwise? Or only in the context of the media query? – Kevin Boucher May 17 '18 at 16:58
  • The toggle-btn need to be displayed only in the context of the media query. Then, the menu need to be displayed only when I click on this button. – iDrums May 17 '18 at 17:02
  • Then move your menu/nav positioning style outside (above) the media query. – Kevin Boucher May 17 '18 at 17:12