1

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

4

1 回答 1

0

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

在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); }
于 2014-09-10T15:21:50.620 回答