zurb-foundation-5
Version:
Foundation 5 for npm (no code modification from original repo)
51 lines (46 loc) • 1.95 kB
HTML
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#">Clickable Top Bar</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li class="has-dropdown"><a href="#">Main Item 1</a>
<ul class="dropdown">
<li><label>Dropdown Level 1 Label</label></li>
<li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li class="divider"></li>
<li><label>Dropdown Level 1 Label</label></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
</ul>
</section>
</nav>