1

我正在使用 CSS 而不是 SCSS 使用 Foundation 6 构建网站。我在小屏幕上使用响应式画布外向下钻取菜单，默认情况下，画布外菜单宽度为 250 像素。

问题：我希望这是浏览器窗口的全宽。

设置宽度

我使用 JavaScript 动态设置.off-canvas.position-right width窗口的宽度和窗口right的负宽度。我还设置.off-canvas .drilldown max-width了窗口的宽度。

这很好用，我是这样做的：

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
        offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
        isDrilldown = document.querySelector( '.off-canvas .is-drilldown' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

}
setOffCanvasWidth();

我对这部分很满意，但它只解决了一半的问题。

移动画布外

除了处理菜单的宽度，.is-open-right使用transform: translateX().

我尝试在我的函数中包含这些行以将transform: translateX()值设置为窗口的负宽度：

var offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );
offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";

但这没有用。我认为这与窗口加载时.off-canvas-wrapper-inner没有类的事实有关。.is-open-right该类是在单击汉堡切换按钮后动态添加的，该按钮具有.menu-icon. 所以我尝试添加一个click事件监听器，但它仍然不起作用。

这是我的全部JS代码：

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
            offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
            isDrilldown = document.querySelector( '.off-canvas .is-drilldown' ),
            menuIcon = docuemnt.querySelector( '.menu-icon' ),
            offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

    menuIcon.addEventListener( 'click', function() {
        offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";
    } );

}
setOffCanvasWidth();

我哪里错了？

我不是在寻找任何人为我编写解决方案，但任何关于我如何设置.is-open-right translateX值的反馈和指导都会非常有帮助。

这是整个项目代码：https
://github.com/paulshryock/paulshryock/releases/tag/v0.0.1 这是一个现场演示：https ://paulshryock.github.io/paulshryock/

4

1 回答 1

2

使用 的translateX值-100%。百分比转换基于元素的尺寸，因此100%等于元素的宽度。此时不需要 JavaScript。

在那一点上，我建议将菜单设置left为100%而不是设置right为负宽度。

于 2016-10-12T18:12:13.453 回答