6.0 - Navigation
6.1 - Navigation example
A collection of helper classes that might be useful to be used throughout the application
Default styling |
|
Navigation |
.mee-navigation |
Horizontal navigation |
.mee-navigation-horizontal |
<nav class="{$modifiers}">
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Add</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Logout</a></li>
</ul>
<nav>
6.2 - Mobile menu trigger
A mobile menu trigger only visible on smaller screens
Default styling |
|
<span class="mee-purple-bg mee-menu-trigger"></span>
6.3 - Mobile Navigation example with icons
A collection of helper classes that might be useful to be used throughout the application
Default styling |
|
<header class="mee-header mee-authenticated-header">
<div class="mee-header-left">
<a class="mee-logo" href="/"><img src="../public/images/logo.png"></a>
<span class="mee-menu-trigger" onclick="document.querySelector('.mee-header').classList.toggle('mee-is-open')"></span>
</div>
<div class="menu-wrapper">
<div class="mee-header-middle">
<nav class="mee-navigation mee-navigation-horizontal">
<ul>
<li><a ui-sref="titles"><span class="mee-icon-grid"></span><br>View</a></li>
<li><a ui-sref="access-code"><span class="mee-icon-add"></span><br>Add</a></li>
<li class="last"><a ui-sref="logout"><span class="mee-icon-logout"></span><br>Log out</a></li>
</ul>
</nav>
</div>
<div class="mee-header-right">
<div class="mee-select mee-white-select mee-vertical-center">
<translate-dropdown>
<select name="" id="">
<option value="">English Yo</option>
<option value="">Spanish Hola!</option>
<option value="">Lang 3</option>
<option value="">Lang 4</option>
</select>
</translate-dropdown>
</div>
</div>
</div>
</header>
