Question

我目前正在处理我的新菜单，并遇到了一些不良影响的问题。基本上我想要一个画布菜单，当菜单变为活动状态时将页面向右移动，这很简单，并且我已经采用了calc(100% - 100px)，它工作得很好但有一个障碍，导致颠簸（溢出））。

使用jQuery我已经让脚本在类上添加一个活动类，然后可以定义overflow:hidden，但是当菜单关闭时，它当然会激活并导致看起来很丑的临时溢出。

然后我提出了使用jQuery setTimeout函数的不太明智的想法，该函数添加和删除活动到页面主体，如下所示：

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

这解决了一个问题，但随后引发了另外两个问题。在删除类（800延迟）之前页面不可滚动而另一个问题是，如果您在800内发送垃圾邮件菜单按钮，则会混淆并删除或添加类，或者不想要。

这是我的JavaScript代码：

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

这是我的HTML代码：

<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>

这是我的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;}

这里是我的jsFiddle https://jsfiddle.net/bybe/mybdnvt0/（请注意，在正文上添加课程并不适用于小提琴，或者至少对我而言）。

必须有一种更简单的方法来做到这一点，我确定我错过了一些简单的事情！

如何在不触发水平溢出的情况下使用我的非画布菜单？

Answer 1

这会是您想要 FIDDLE 吗？

我在可点击的菜单（.menu-main）周围包裹了一个容器，并在左侧（.menu-left）包含了额外的内容。

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

我将菜单容器（side.menu）定位为固定，并将其定位为等于menu-left

的大小

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

由于我们将左侧设置为-150px，.menu-left的宽度相等。

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

这只会隐藏屏幕外的.menu-left 但我们需要打开它，以便添加.main-menu。

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

我们添加float:left，以便菜单项不会显示在另一个菜单项下。

在这样的立场下？现在为javascript / jquery：

当我们点击主菜单时，我们需要将左侧位置设置为0：

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

当我们关闭它时，我们希望它恢复到它的值：

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

但我们可能也希望推动其他元素的内容因此，我们的“主要”内容的＆lt; div class =“main”＆gt; 应该适合此处。由于我们不希望我们的内容位于菜单下，因此必须使margin-right等于我们菜单的.main {margin-left: 100px;}。所以：.side-menu
如果我们打开菜单，我们需要将margin-left设置为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; } });的大小，因为它是一个容器，它将具有其子项的大小。

{{1}}

这就是我接近你所做的菜单解决方案的方法。我希望它能帮到你:)。

CSS Calc（100％ - 100px）在夜间造成颠簸（溢出）

1 个答案: