Menu
@@adsense
The framework provides tools to create different cool menu, as horizontal, vertical, tool and any menu types.
All menus have a similar structure and are created using lists, list items and anchors.
Menu is determined by the class applied to the root list.
For drop down menu use the role dropdown.
Horizontal menu
Default
Compact
<ul class="horizontal-menu">
<li>
<a href="#" class="dropdown-toggle">Products</a>
<ul class="d-menu" data-role="dropdown">
<li>
<a href="#" class="dropdown-toggle">Windows</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="#">Windows 8.1</a></li>
<li><a href="#">Windows 10</a></li>
</ul>
</li>
<li><a href="#">Skype</a></li>
<li><a href="#">Office</a></li>
</ul>
</li>
<li><a href="#">Download</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Buy...</a></li>
</ul>
<ul class="horizontal-menu compact">...</ul>
Vertical menu
Default
Compact
<ul class="vertical-menu">...</ul>
<ul class="vertical-menu compact">...</ul>
M-MENU
- Home
-
Overview
Metro UI CSS 3.0
Metro UI CSS a set of styles to create a site with an interface similar to Windows 8.
Sergey Pimenov
Begin with Metro UI CSS
- Requirements
- Doctype
- JavaScript
- Browsers support
- License
- Download
- Devices
- Support
- Store
<ul class="m-menu" >
<li><a href="#">Home</a></li>
<li>
<a href="#" class="dropdown-toggle">Overview</a>
<div class="m-menu-container" data-role="dropdown" data-no-close="true">
<div class="grid no-margin">
<div class="row cells5">
<div class="cell padding10">
<img src="images/me.jpg">
</div>
<div class="cell colspan2">
<h2 class="fg-white text-bold text-shadow">Metro UI CSS 3.0</h2>
<p class="padding20 no-padding-top no-padding-left no-padding-bottom fg-white">
Metro UI CSS a set of styles to create a site with an interface similar to Windows 8.
</p>
<p class="fg-white text-bold">
Sergey Pimenov
</p>
</div>
<div class="cell colspan2">
<ul class="unstyled-list">
<li><h3 class="text-shadow">Begin with Metro UI CSS</h3></li>
<li><a class="fg-white" href="#">Requirements</a></li>
<li><a class="fg-white" href="#">Doctype</a></li>
<li><a class="fg-white" href="#">JavaScript</a></li>
<li><a class="fg-white" href="#">Browsers support</a></li>
<li><a class="fg-white" href="#">License</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="dropdown-toggle">Download</a>
<div class="m-menu-container" data-role="dropdown" data-no-close="true">
<ul class="inline-list">
<li><a href="#">Windows</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Skype</a></li>
<li><a href="#">Internet Explorer</a></li>
<li><a href="#">Visio</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="dropdown-toggle">Devices</a>
<div class="m-menu-container" data-role="dropdown">
<ul class="inline-list">
<li><a href="#">Surface</a></li>
<li><a href="#">Xbox</a></li>
<li><a href="#">PC & Tables</a></li>
<li><a href="#">Phones</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</div>
</li>
<li><a href="#">Support</a></li>
<li><a href="#">Store</a></li>
</ul>
Warning!
Please note that the content of the drop-down menu item should be in the container with the class m-menu-container.
F-MENU (flex menu)
H-MENU
<ul class="h-menu">
<li><a href="#">Home</a></li>
<li><a href="#">File</a></li>
<li><a href="#">Products</a></li>
<li>
<a href="#" class="dropdown-toggle">More...</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="#">About</a></li>
<li><a href="#">Partners</a></li>
</ul>
</li>
<li class="place-right no-hovered">
<form>
<div class="input-control text" style="width: 250px; margin-right: 10px">
<input type="text" placeholder="Search...">
<button class="button"><span class="mif-search"></span></button>
</div>
</form>
</li>
</ul>
T-MENU
<ul class="t-menu">
<li><a href="#"><span class="icon mif-home"></span></a></li>
<li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
<ul class="t-menu horizontal" data-role="dropdown">
<li><a href="#"><span class="icon mif-home"></span></a></li>
<li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
<ul class="t-menu" data-role="dropdown">
<li><a href="#"><span class="icon mif-home"></span></a></li>
<li><a href="#"><span class="icon mif-compass"></span></a></li>
<li><a href="#"><span class="icon mif-bubbles"></span></a></li>
<li><a href="#"><span class="icon mif-file-empty"></span></a></li>
</ul>
</li>
<li><a href="#"><span class="icon mif-bubbles"></span></a></li>
</ul>
</li>
<li><a href="#"><span class="icon mif-bubbles"></span></a></li>
<li><a href="#"><span class="icon mif-file-empty"></span></a></li>
</ul>
<ul class="t-menu horizontal compact">
<li><a href="#"><span class="icon mif-home"></span></a></li>
<li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
<ul class="t-menu compact" data-role="dropdown">
<li><a href="#"><span class="icon mif-home"></span></a></li>
<li><a href="#" class="dropdown-toggle"><span class="icon mif-compass"></span></a>
<ul class="t-menu horizontal compact" data-role="dropdown">
<li><a href="#"><span class="icon mif-home"></span></a></li>
<li><a href="#"><span class="icon mif-compass"></span></a></li>
<li><a href="#"><span class="icon mif-bubbles"></span></a></li>
<li><a href="#"><span class="icon mif-file-empty"></span></a></li>
</ul>
</li>
<li><a href="#"><span class="icon mif-bubbles"></span></a></li>
<li><a href="#"><span class="icon mif-file-empty"></span></a></li>
</ul>
</li>
<li><a href="#"><span class="icon mif-bubbles"></span></a></li>
<li><a href="#"><span class="icon mif-file-empty"></span></a></li>
</ul>
V-MENU, D-MENU
Лента
Фото
Локации
Сообщества
<ul class="v-menu">
<li class="menu-title">First Title</li>
<li><a href="#"><span class="mif-home icon"></span> Home</a></li>
<li class="divider"></li>
<li class="menu-title">Second Title</li>
<li><a href="#"><span class="mif-user icon"></span> Profile</a></li>
<li><a href="#"><span class="mif-calendar icon"></span> Calendar</a></li>
<li><a href="#"><span class="mif-image icon"></span> Photo</a></li>
<li class="divider"></li>
<li class="menu-title">Third Title</li>
<li>
<a href="#" class="dropdown-toggle"><span class="mif-my-location icon"></span> Location</a>
<ul class="d-menu" data-role="dropdown">
<li class="menu-title">Title for dropdown</li>
<li><a href="#">Коллеги</a></li>
<li><a href="#">Интересно</a></li>
<li>
<div class="item-block text-center">
<button class="square-button"><img class="icon" src="images/round.png"></button>
<button class="square-button"><img class="icon" src="images/location.png"></button>
<button class="square-button"><img class="icon" src="images/group.png"></button>
</div>
</li>
<li>
<a href="#" class="dropdown-toggle">Еще...</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="#">Коллеги</a></li>
<li><a href="#">Интересно</a></li>
<li>
<div class="item-block text-center bg-grayLighter">
<button class="round-button"><img class="icon" src="images/round.png"></button>
<button class="round-button"><img class="icon" src="images/location.png"></button>
<button class="round-button"><img class="icon" src="images/group.png"></button>
<button class="round-button"><img class="icon" src="images/power.png"></button>
</div>
</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span class="mif-bubbles icon"></span> Community</a></li>
</ul>
<ul class="v-menu subdown">...</ul>
<ul class="v-menu context">...</ul>
Color schemes
This future required metro-schemes.css
darcula, pink, red, navy, green, orange
<ul class="v-menu darcula">...</ul>
<ul class="d-menu pink">...</ul>