Question

我正在寻找具有多级项目的Side Nav。默认情况下，zurb foundation 5由于某种原因不支持子菜单。

<ul class="side-nav">
    <li><a href="#">Link 1</a>
    </li>
    <li><a href="#">Link 2</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">Link 3</a>
    </li>
    <ul>
        <li><a href="#">Link 1</a>
        </li>
        <li><a href="#">Link 2</a>
        </li>
    </ul>
    <li><a href="#">Link 4</a>
    </li>
</ul>

是否可以将其更改为支持子菜单的子菜单，如向下箭头或+符号。

Answer 1

要做到这一点，你必须改变侧面导航标记并添加一些css和js。

新标记（子ul必须添加为ass li child而不是ul.side-nav child）：

<ul class="side-nav">
    <li><a href="#">Link 1</a>
      <ul> <!-- added ul inside of li -->
        <li><a href="#">Sub Link 1</a></li>
        <li><a href="#">Sub Link 2</a></li>
      </ul>
    </li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

JS

$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
$(this).toggleClass( "active" ) // add active class to clicked menu item
    $(this).children('ul').slideToggle(); //toggle submenu
});

CSS

.hasChildren:before{
   content: "+";
   float: left;
}
.hasChildren.active:before{
   content: "-";
}

http://codepen.io/mouhammed/pen/vcnCb

Answer 2

我遇到了同样的问题，并遇到了一个新的解决方案。

Foundation现在有一个通用下拉组件，因此您可以向任何元素添加下拉功能。

所以我做的是创建常规侧导航，然后为每个项添加下拉列表。下拉菜单可以自定义为下拉方向下拉，如向上，向左，甚至向右。它也可以在悬停时显示。

<ul class='side-nav'>
  <li>
    <a href="#" data-dropdown="dropdownid1" data-options="align:right">Menu Item 1</a>

      <ul id="dropdownid1" class="f-dropdown" data-dropdown-content>
        <li>
          <a href="#">Sub Menu 1-1</a>
          <a href="#">Sub Menu 1-2</a>
          <a href="#">Sub Menu 1-3</a>
        </li>
      </ul>

  </li>
</ul>

因此，通过将初始元素中的数据选项设置为＆＃34; align：right＆＃34;，它将是直接而不是下拉列表。你也可以设置＆＃34; is_hover：true＆＃34;用于悬停模式两者之间使用分号。

a元素中的data-dropdown值必须与ul元素的id匹配，我相信ul可以放在你想要的任何其他地方，尽管我喜欢将它保存在它正在下降的元素之下。 / p>

了解更多信息，请查看基础文档

http://foundation.zurb.com/docs/components/dropdown.html#

如何将子菜单添加到zurb基础Side Nav

2 个答案: