更改需要出现在屏幕右侧的 offcanvas-menu 的宽度
Change width of offcanvas-menu that needs to appear on right of screen
这是关于 zurb-foundation 5.3 的。我不知道 scss 所以我使用的是 css 版本的 foundation 5.3。我正在关注帮助我指定自定义宽度的 basic example for offcanvas menu from foundation docs. This offcanvas-menu seemed to have a default width. Since, I wanted a custom-width, I found a solution on SO。在这种情况下,一切都按预期工作,当画布内容出现时 on the left of the screen
。
现在。我对代码做了一些更改,因为我希望 offcanvas 内容出现 on the right of the screen
。这是不起作用的代码。我的意思是,它确实出现在屏幕右侧,但具有默认宽度,而不是我指定的宽度。
**** HTML ****
<div class="lorem off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- on-canvas-content -->
<p>some on-canvas main content here</p>
<!-- off-canvas-content -->
<aside class="lorem right-off-canvas-menu">
<div class="inner-canvas-content">
<p>some off canvas menu or other contents here</p>
</div>
</aside>
<a class="exit-off-canvas"></a>
</div><!-- end inner-wrap -->
</div><!-- end offcanvas-wrap -->
**** CSS ****
.lorem.move-left > .inner-wrap {
webkit-transform: translate3d( 500px, 0, 0);
-moz-transform: translate3d( 500px, 0, 0);
-ms-transform: translate3d( 500px, 0, 0);
-o-transform: translate3d( 500px, 0, 0);
transform: translate3d( 500px, 0, 0);
}
.lorem.right-off-canvas-menu {
width: 500px;
}
解决了。我忽略了一个明显的事实,即如果我们需要将块推到屏幕左侧,边距将变为负数。在这种情况下,如下所示。
.lorem.move-left > .inner-wrap {
webkit-transform: translate3d( -500px, 0, 0);
-moz-transform: translate3d( -500px, 0, 0);
-ms-transform: translate3d( -500px, 0, 0);
-o-transform: translate3d( -500px, 0, 0);
transform: translate3d( -500px, 0, 0);
}
这是关于 zurb-foundation 5.3 的。我不知道 scss 所以我使用的是 css 版本的 foundation 5.3。我正在关注帮助我指定自定义宽度的 basic example for offcanvas menu from foundation docs. This offcanvas-menu seemed to have a default width. Since, I wanted a custom-width, I found a solution on SO。在这种情况下,一切都按预期工作,当画布内容出现时 on the left of the screen
。
现在。我对代码做了一些更改,因为我希望 offcanvas 内容出现 on the right of the screen
。这是不起作用的代码。我的意思是,它确实出现在屏幕右侧,但具有默认宽度,而不是我指定的宽度。
**** HTML ****
<div class="lorem off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- on-canvas-content -->
<p>some on-canvas main content here</p>
<!-- off-canvas-content -->
<aside class="lorem right-off-canvas-menu">
<div class="inner-canvas-content">
<p>some off canvas menu or other contents here</p>
</div>
</aside>
<a class="exit-off-canvas"></a>
</div><!-- end inner-wrap -->
</div><!-- end offcanvas-wrap -->
**** CSS ****
.lorem.move-left > .inner-wrap {
webkit-transform: translate3d( 500px, 0, 0);
-moz-transform: translate3d( 500px, 0, 0);
-ms-transform: translate3d( 500px, 0, 0);
-o-transform: translate3d( 500px, 0, 0);
transform: translate3d( 500px, 0, 0);
}
.lorem.right-off-canvas-menu {
width: 500px;
}
解决了。我忽略了一个明显的事实,即如果我们需要将块推到屏幕左侧,边距将变为负数。在这种情况下,如下所示。
.lorem.move-left > .inner-wrap {
webkit-transform: translate3d( -500px, 0, 0);
-moz-transform: translate3d( -500px, 0, 0);
-ms-transform: translate3d( -500px, 0, 0);
-o-transform: translate3d( -500px, 0, 0);
transform: translate3d( -500px, 0, 0);
}