Question

所以我一直在玩基金会的这种离幕导航，并且已经相当远。我有一个菜单列表，里面有子菜单，都位于我页面的左侧。这是我现在的代码：

<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的孩子的班级改为＆＃34;右子菜单＆＃34;这似乎不起作用。任何人都知道可能有用的其他选项吗？

我使用的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); }

Off-Canvas导航滑动功能

1 个答案: