0

这是关于 zurb-foundation 5.3 的。我不知道scss，所以我使用的是foundation 5.3的css版本。我正在关注基础文档中关于画布菜单的这个非常基本的示例。这个 offcanvas-menu 似乎有一个默认宽度。因为，我想要一个自定义宽度，所以我在 SO 上找到了一个解决方案，可以帮助我指定自定义宽度。在这种情况下，当画布内容出现时，一切都按预期工作on the left of the screen。

现在。我对代码进行了一些更改，因为我希望 offcanvas-content 出现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;
     }
4

1 回答 1

0

解决了。我错过了一个明显的事实，即如果我们需要将块推到屏幕左侧，边距将变为负数。在这种情况下，如下所示。

.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);
 }
于 2017-03-26T11:10:15.723 回答