Metro UI 4 Jekyll 2.0
0
0

Navigation Barcomponent

Navigation Bar is represented navigation component for creating menu.

METRO UI CSS 2.0 
<nav class="navigation-bar dark">
    <nav class="navigation-bar-content">
        <item class="element">...</item>
        <item class="element-divider">...</item>
        ...
        <item class="element">...</item>
    </nav>
</nav>

Navigator Bar element can be: <a>, <div>, <span>, etc. Complex element (example input-control) must be included in div with .element class. For creating divider you must add span with .element-divider class. For placing element right you must add class .place-right to element. 

<nav class="navigation-bar">
    <nav class="navigation-bar-content">
        <div class="element">
            <a class="dropdown-toggle" href="#">METRO UI CSS</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="#">Main</a></li>
                <li><a href="#">File Open</a></li>
                <li class="divider"></li>
                <li><a href="#">Print...</a></li>
                <li class="divider"></li>
                <li><a href="#">Exit</a></li>
            </ul>
        </div>

        <span class="element-divider"></span>
        <a class="element brand" href="#"><span class="icon-spin"></span></a>
        <a class="element brand" href="#"><span class="icon-printer"></span></a>
        <span class="element-divider"></span>

        <div class="element input-element">
            <form>
                <div class="input-control text">
                    <input type="text" placeholder="Search...">
                    <button class="btn-search"></button>
                </div>
            </form>
        </div>

        <div class="element place-right">
            <a class="dropdown-toggle" href="#">
                <span class="icon-cog"></span>
            </a>
            <ul class="dropdown-menu place-right" data-role="dropdown">
                <li><a href="#">Products</a></li>
                <li><a href="#">Download</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Buy Now</a></li>
            </ul>
        </div>
        <span class="element-divider place-right"></span>
        <a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
        <span class="element-divider place-right"></span>
        <button class="element image-button image-left place-right">
            Sergey Pimenov
            <img src="images/211858_100001930891748_287895609_q.jpg"/>
        </button>
    </nav>
</nav>

You can create fixed (top or bottom) navigation bar with built in subclasses .fixed-top, .fixed-bottom. 

<nav class="navigation-bar fixed-top">...</nav>
<nav class="navigation-bar fixed-bottom">...</nav>

Themed navigation-bar

Default

Dark

Light

White

<nav class="navigation-bar dark">...</nav>
<nav class="navigation-bar light">...</nav>
<nav class="navigation-bar white">...</nav>

Drop-up menu

For navigation bar, located at the bottom of the page may need to disclose the possibility of up menu. Metro UI CSS gives you this opportunity. To do this you need to add to the element-menu class drop-up 

<nav class="navigation-bar fixed-bottom">
    <ul class="element-menu drop-up">
        ...
    </ul>
</nav>
METRO UI CSS 2.0