jquery - Canvas 外导航滑动功能

Question

所以我一直在研究 Foundation 的 Canvas 外导航，并且已经取得了很大进展。我有一个菜单列表，里面有子菜单，都位于我页面的左侧。这是我的代码:

<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>

现在，当您单击从右侧滑入的子菜单之一时。我想知道是否有任何方法可以让它从左侧滑入。我尝试将那个 li 的子 ul 的类更改为“right-submenu”，但这似乎不起作用。任何人都知道任何其他可能有用的选项吗？

我使用的 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%，但这只是将它一直推到左侧并离开主要内容下方的另一侧。有什么帮助吗？

Answer 1

以下是遇到此问题的其他人的答案:

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