画布外导航滑动功能答案

【问题标题】：Off-Canvas Navigation Sliding Feature画布外导航滑动功能
【发布时间】：2014-09-09 21:55:09
【问题描述】：

所以我一直在使用 Foundation 的这个画布外导航，并且已经取得了相当大的进展。我有一个菜单列表，里面有子菜单，都位于页面的左侧。这是我现在的代码：

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

【问题讨论】：

这里需要多说。您的问题来自 CSS 或 javascript（并且知道 Foundation，它很可能是 CSS）。所以社区需要在这里帮助您的是您拥有的 CSS 或您正在使用的插件的名称。
CSS 是一个非常大的文件，所以我不太确定如何共享它。如果有帮助的话，它就是foundation.css默认文件

标签： jquery html css zurb-foundation translate3d

【解决方案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); }

【讨论】：