Appbar
@@adsenseAppbar container
Create appbar container
<div class="app-bar">
...
</div>
Appbar elements
To create app-bar elements you can use next classes: for single element .app-bar-element, for multi (menu) app-bar-menu, for divider app-bar-divider
Create app-bar elements
<div class="app-bar">
<a class="app-bar-element" href="...">Home</a>
<span class="app-bar-divider"></span>
<ul class="app-bar-menu">
<li><a href="">Home</a></li>
<li>
<a href="" class="dropdown-toggle">Products</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="">Windows 10</a></li>
<li><a href="">Spartan</a></li>
<li><a href="">Outlook</a></li>
<li><a href="">Office 2015</a></li>
<li class="divider"></li>
<li><a href="" class="dropdown-toggle">Other Products</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="">Internet Explorer 10</a></li>
<li><a href="">Skype</a></li>
<li><a href="">Surface</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Support</a></li>
<li><a href="">Help</a></li>
</ul>
</div>
Pull down
To create pull-down you can add element (span recommended) with class app-bar-pull and add data-role="appbar" to appbar.
Create app-bar elements
<div class="app-bar" data-role="appbar">
<a class="app-bar-element" href="...">Home</a>
<span class="app-bar-divider"></span>
<ul class="app-bar-menu">
<li><a href="">Home</a></li>
<li><a href="">Support</a></li>
<li><a href="">Help</a></li>
</ul>
<span class="app-bar-pull"></span>
</div>
Drop container
To create appbar drop container you can put inside app-bar-element toggle and container. Container can has class app-bar-drop-container.
Drop container with tiles
<div class="app-bar">
<a class="app-bar-element">
<span id="toggle-tiles-dropdown" class="mif-apps mif-2x"></span>
<div class="app-bar-drop-container"
data-role="dropdown"
data-toggle-element="#toggle-tiles-dropdown"
data-no-close="false" style="width: 324px;">
<div class="tile-container bg-white">
<div class="tile-small bg-cyan">
<div class="tile-content iconic">
<span class="icon mif-onedrive"></span>
</div>
</div>
<div class="tile-small bg-yellow">
<div class="tile-content iconic">
<span class="icon mif-google"></span>
</div>
</div>
<div class="tile-small bg-red">
<div class="tile-content iconic">
<span class="icon mif-facebook"></span>
</div>
</div>
<div class="tile-small bg-green">
<div class="tile-content iconic">
<span class="icon mif-twitter"></span>
</div>
</div>
</div>
</div>
</a>
</div>
Drop container with form
<div class="app-bar">
<div class="app-bar-element place-right">
<a class="dropdown-toggle fg-white"><span class="mif-enter"></span> Enter</a>
<div class="app-bar-drop-container bg-white fg-dark place-right"
data-role="dropdown" data-no-close="true">
<div class="padding20">
<form>
<h4 class="text-light">Login to service...</h4>
<div class="input-control text">
<span class="mif-user prepend-icon"></span>
<input type="text">
</div>
<div class="input-control text">
<span class="mif-lock prepend-icon"></span>
<input type="password">
</div>
<label class="input-control checkbox small-check">
<input type="checkbox">
<span class="check"></span>
<span class="caption">Remember me</span>
</label>
<div class="form-actions">
<button class="button">Login</button>
<button class="button link">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
Drop container have additional property data-on-close. If this property is true container not closed on click on container.
Drop-up
To create appbar in drop-up mode you can add class drop-up to appbar.
<div class="app-bar drop-up">...</div>
Fixed bar
You can create fixed (top or bottom) navigation bar with built in subclasses .fixed-top, .fixed-bottom. If you use fixed position for application bar you can set manually margin or padding for main content from appbar.
<div class="app-bar fixed-top">...</div>
<div class="main-content" style="margin-top: 3.125rem">
...
</div>
or
<div class="main-content" style="padding-top: 3.125rem">
...
</div>
Place element on right
To place appbar element on right you must add class place-right to element.
<div class="app-bar">
<a class="app-bar-element place-right">Home</a>
</div>