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>