画面の右側に表示する必要があるoffcanvasメニューの幅を変更してください。

Question

これはzurb-foundation 5.3に関するものです。私はscssを知らないので、Foundation 5.3のCSSバージョンを使用しています。私は基礎文書からoffcanvasメニューのためにこの非常にbasic exampleに従っています。このoffcanvas-menuはデフォルトの幅を持っていたようです。カスタム幅が必要だったので、カスタム幅を指定するのに役立つsolution on SOが見つかりました。この場合、オフキャンバスのコンテンツがon the left of the screenと表示されたときに、すべてが正常に機能しました。

今すぐ。オフキャンバスコンテンツを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; 
    } 

Answer 1

解決済み。私は、ブロックを画面の左に押す必要がある場合、マージンがマイナスになるという明らかな事実を逃しました。この場合、以下のようなものがあります。

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