更改基金会菜单画布的宽度

Question

我正在使用框架基础，非常有用。
我想知道如何更改画布菜单的宽度。
使用 escusicamente css。
谢谢

Answer 1

如果您使用的是 scss 版本的 Foundation，就像更改settings.scss文件中的$off-canvas-width: rem-calc(250);一样简单。

如果您使用的是css，则需要更改.left-off-canvas-menu和.move-right > .inner-wrap transform的宽度。我建议你通过在.left-off-canvas-menu和off-canvas-wrap中添加一个新类来覆盖特异性，类似于<div class="my-site off-canvas-wrap" data-offcanvas>和<div class="my-site left-off-canvas-menu>

然后是 CSS：

.my-site.move-right > .inner-wrap {
    webkit-transform: translate3d(newwidth, 0, 0);
    -moz-transform: translate3d(newwidth, 0, 0);
    -ms-transform: translate3d(newwidth, 0, 0);
    -o-transform: translate3d(newwidth, 0, 0);
    transform: translate3d(newwidth, 0, 0);
}

和

.my-site.left-off-canvas-menu {
    width: newwidth;
}

Answer 2

对于 Foundation 6，我使用以下代码来更改画布外菜单的宽度（使用变量）：

$offcanvas-right-size: 315px;
.is-open-right {
    -webkit-transform: translateX(-$offcanvas-right-size);
    -ms-transform: translateX(-$offcanvas-right-size);
    transform: translateX(-$offcanvas-right-size);
}
.off-canvas.position-right {
  width: $offcanvas-right-size;
  right: -$offcanvas-right-size;
}

我有左右菜单，希望右菜单更小。

Answer 3

关于上述答案的补充（代表块注释功能）也用粉底6制成

Lee 忘记解决的是，至少在我的代码中，第二个div 嵌套在画布外位置左侧的画布中第一个类用于画布外菜单的大小，第二个类用于移动内容

.is-open-left {
-webkit-transform: translateX(125px);
-ms-transform: translateX(125px);
transform: translateX(125px);
}

.off-canvas-menu{
padding-left:125px;
}