Foundation 4: Top Bar
The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.
Here's the sample html that we want Taxonomy to output:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><a href="#">Top Site Label </a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul>
<li class="divider"></li>
<li class="has-dropdown"><a href="#">Level 1A</a>
<ul class="dropdown">
<li><a href="#">Level 1A A</a></li>
<li class="has-dropdown"><a href="#">Level 1A B</a>
<ul class="dropdown">
<li><a href="#">Level 1A B A</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#">Level 1B</a>
<ul class="dropdown">
<li><a href="#">Level 1B A</a></li>
<li><a href="#">Level 1B B</a></li>
</ul>
</li>
<li class="divider"></li>
</ul>
</section>
</nav>
Everything within the .top-bar-section is going to be our tree structure, with .has-dropdown applied to any parents with children, .divider's between each list item in the top level, and .dropdown applied to all nested ul elements.