How to add submenu to zurb foundation Side Nav

问题:

I am looking for a Side Nav with multilevel items. By default zurb foundation 5 does not support sub menus for some reason.

http://jsfiddle.net/pvG7V/1/

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

Can this be changed to support submenus with an indicator for sub menu like an down arrow or + sign.

回答1:

To do that, you have to change the side-nav markup and add some css and js.

New markup (the sub ul must be added ass li child and not 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

回答2:

I was having this same problem, and came across a new solution.

Foundation now has a generic drop down component so that you can add drop down functionality to any element.

So what I did was create the regular side nav, and then add dropdowns to each item. Dropdowns can be customized to dropdown in directions other than just down, like up, left, and yes even to the right. It is also possible to make it appear on hover.

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

so by setting the data-options in the initial a element to "align:right", it will dropright instead of dropdown. you can also set "is_hover:true" for hover mode to use both use a semicolon in between.

the data-dropdown value in the a element must match the id of the ul element, and i believe the ul can be placed anywhere else you want, though i like to keep it under the element it is dropping down from.

for more info checkout the foundation docs

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