formularios - sidebar menu foundation

Cambiar el ancho del lienzo del menú de la Fundación

Question

Estoy usando la base de framework y es muy útil.
Quería saber cómo puedes cambiar el ancho del menú del lienzo.
Utilice escusicamente css.
Gracias

Answer 1

Si está utilizando la versión scss de Foundation, es tan fácil como cambiar $off-canvas-width: rem-calc(250); en su archivo settings.scss .

Si está utilizando css, necesita cambiar el ancho del .left-off-canvas-menu y la .move-right > .inner-wrap . Sugiero que anule la especificidad agregando una nueva clase a .left-off-canvas-menu y off-canvas-wrap , algo así como <div class="my-site off-canvas-wrap" data-offcanvas> y <div class="my-site left-off-canvas-menu>

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

y

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

Answer 2

Para Foundation 6, utilicé el siguiente código para cambiar el ancho del menú fuera del lienzo (usando una variable):

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

Tenía menús izquierdo y derecho y quería el derecho de ser más pequeño.

Answer 3

En una adición a la respuesta anterior (Función de comentario de bloques de Rep) también se hizo con base 6

Lo que Lee olvidó abordar es que el segundo div está anidado en el lienzo de posición izquierda fuera del lienzo, al menos en mi código. La primera clase es para el tamaño del menú fuera del lienzo y la segunda para mover también el contenido.

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