オフキャンバスナビゲーションスライド機能 - jquery、html、css、zurb-foundation、translate3d

だから私はこのオフキャンバスで遊んでいた財団からのナビゲーションはかなり遠くになっています。私はそれらの中のサブメニューを持つメニューのリストを持っていて、すべて私のページの左に位置しています。ここに私のコードがあります：

<ul class="uppercase off-canvas-list">
<li class="has-submenu"><a href="#">List 1</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back</a></li>
<li><a href="#">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
</ul>
</li>
<li class="has-submenu"><a href="#">List 2</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back</a></li>
<li><a href="#">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
</ul>
</li>
<li class="has-submenu"><a href="#">List 3</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back</a></li>
<li><a href="#">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
</ul>
</li>
</ul>

これで、サブメニューの1つをクリックすると右からスライドします。それを左からスライドさせる方法があれば、私は思っていた。その児童の授業を「右サブメニュー」に変更しようとしましたが、うまくいかないようです。

私が使用しているCSSファイルがデフォルトですfoundation.cssファイル。私はoff-canvas.jsファイルとfoundation.jsファイルも使用していますが、これらのファイルは全く操作されていません。問題はCSSファイルにあるように感じます。右：

.left-submenu.move-right
{
-ms-transform: translate(0%, 0);
-webkit-transform: translate3d(0%, 0, 0);
-moz-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

この部分を編集して反対側から私は何をする必要がありますか？私は値を100％に変更しようとしましたが、それは主コンテンツの下の左側と左側の両方に押し込んでいます。どんな助け？

回答：

この問題を克服する他の誰かの答えは次のとおりです。

foundation.cssファイルには、.left-submenuという名前のクラスがあります。次の値を私が変更したものに変更してください：

  -webkit-overflow-scrolling: touch;
-ms-transform: translate(100%, 0);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);

次に、クラス.left-submenu.move-rightのスタイルで、以下を以下に変更してください：

    -ms-transform: translate(0%, 0);
-webkit-transform: translate3d(0%, 0, 0);
-moz-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0); }