CSS Calc（100％-100px）在夜间引起颠簸（溢出）

Question

I'm currently working on my new menu and ran into some problems with some undesirable effects. Basically I want a off canvas menu that shifts the page to the right when the menu becomes active, this is simple enough and I've adopted using calc(100% - 100px) which works great but with one snag, its causing bumps (overflow).

Using jQuery I have made the script add a active class on the classes which can then define overflow:hidden , however as the menu is closing it of course activates and causes a temporary overflow which looks ugly.

I then came up with the not so bright idea of using a jQuery setTimeout function that adds and removes active to the body of the page like so:

        setTimeout(function() {
            $(document.body).removeClass('bBodyMenuActive');
        }, 800);

This solves one issue but then causes another two issues. The page is not scrollable until the class is removed ( 800 delay) and the other issue is that if you spam the menu button within 800 delay it gets confused and removes or adds the class when its either wanted, or not wanted.

Here is my JavaScript code:

jQuery(function($) {
    $(".bMenuTrigger").click(function(){menu();});
    function menu(){
        if ($(".bMenuContent").css("marginLeft")=='0px'){$(".bMenuIcon").removeClass("bMenuIconActive");
            $(".bMenuLogo").removeClass("bMenuLogoActive");
            $(".bMenuContent").animate({marginLeft:-$(".bMenuContent").width()},200,function(){});
            $(".bContent").animate({left:'100px'},200,function(){});
            $(".bContent").removeClass("bContentActive");
            setTimeout(function() {
                $(document.body).removeClass('bBodyMenuActive');
            }, 800);
        }else{
            $(document.body).addClass('bBodyMenuActive');
            $(".bMenuIcon").addClass("bMenuIconActive");
            $(".bMenuLogo").addClass("bMenuLogoActive");
            $(".bMenuContent").animate({marginLeft:'0px'},200,function(){});
            $(".bContent").animate({left:$(".bMenuContent").width() + 100},200,function(){});
            $(".bContent").addClass("bContentActive");
        }
    }
    $(".bContent").click(function(){if($(".bContent").hasClass("bContentActive")){menu();}});
});

Here is my HTML code:

<div class="bMenuContainer">
    <div class="bMenuTrigger"><a class="bMenuIcon">MENU</a></div>
    <div class="bMenuContent">Content will be filled Here</div>
</div>
<div class="bContent">

</div>

Here's my CSS

.bMenuContainer{height:100%;position:fixed;z-index:100;}
.bMenuTrigger{cursor:pointer;float:right;height:100%;width:100px;}
.bMenuTrigger a{color:white;text-decoration:none;margin-top:15px;}
.bMenuContent{float:right;height:100%;margin-left:-270px;width:270px;}
.bContent{height:100%;position:absolute;top:0;width:calc(100% - 100px);left:100px;}
.bContentActive{left:270px;position:absolute;overflow-y:hidden;}
.bBodyActive {overflow:hidden;}

Here's my jsFiddle https://jsfiddle.net/bybe/mybdnvt0/ (please note that adding classes on body doesn't work on fiddle, or least for me).

There must be an easier way of doing this and I'm sure I've missed something dead simple!

How can I use my off canvas menu without triggering overflow horizontally?

Answer 1

Would this be something your looking for FIDDLE ?

I wrapped a container around the clickable menu ( .menu-main ) and the extra content to the left ( .menu-left ).

<nav class="side-menu">
    <div class="main-left"></div>
    <div class="main-menu"></div>
</nav

I position the menu container ( side.menu ) fixed so and positioned it left equal to the size of menu-left

.side-menu {
    height: 100vh;
    position:fixed;
    left: -150px;
    top: 0;
}

Since we set the left to -150px the width of .menu-left equal.

.menu-left {
    float: left;
    width: 150px;
    height: 100%;
    background-color: pink;
}

This will just hide .menu-left outside of the screen.
But we need to open it so we add the .main-menu .

.menu-main {
    float: left;
    width: 100px;
    height: 100%;
}

We add float:left so that the menu item don't display under one an other.

Under stand where this is going? now for the javascript/jquery:

We need to set the left position to 0 when we click on the main menu so:

$('.side-menu').css('left', '0px');

and when we close it we want it set back to the value it was:

$('.side-menu').css('left', '-150px');

But we probably want to set push the content of our other elements as well.
So a <div class="main"> for our "main" content should fit here. This will have to have a margin-right equal to that of our menu since we dont want our content to be under the menu. so: .main {margin-left: 100px;}
and if we open the menu we need to set the margin-left to the size of our .side-menu and since its a container it will have the size of its children.

var open = false;
$('.menu-main').click(function () {
    if (open) {
        $('.side-menu').css('left', '-150px');
        $('.main').css('margin-left', '100px');
        open = false;
    } else {
        $('.side-menu').css('left', '0px');
        $('.main').css('margin-left', $('.side-menu').css('width'));
        open = true;
    }
});

This is how I would approach the menu solution you made. I hope it help you :)