I added a sub-menu to foundation's side nav exactly like in this example, but the icon is above the text.
My CSS:
.hasChildren:before{
content: "\25ba";
float: left
}
.hasChildren.active:before{
content: "\25bc";
}
My HTML:
<div class="large-4 medium-4 columns menu-wrapper">
<div class="panel">
<h4>Menu</h4>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link drop</a>
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
jQuery:
$('.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
});
