Metro UI CSS represents styles to create Ribbon Menu (Fluent Menu). This component required metro-fluentmenu.js
<div class="fluent-menu">
<ul class="tabs-holder">
<li><a href="#content_id_1">Tab Name 1</a></li>
...
<li><a href="#content_id_n">Tab Name N</a></li>
</ul>
<div class="tabs-content">
<div class="tab-panel" id="content_id_1">
<div class="tab-panel-group">
<div class="tab-group-content">set of menu elements</div>
<div class="tab-group-caption">group name</div>
</div>
</div>
...
<div class="tab-panel" id="content_id_n">
<div class="tab-panel-group">
<div class="tab-group-content">set of menu elements</div>
<div class="tab-group-caption">group name</div>
</div>
</div>
</div>
</div>
Special elements:
To create buttons segment in group you can use div with class segment. To create iconic button you can use span with class icon-* or img.
<div class="tab-group-content">
<button class="fluent-big-button"><span class="icon-mail"></span>Create<br />message</button>
<div class="tab-content-segment">
<button class="fluent-big-button dropdown-toggle">
<span class="icon-pictures"></span>
<span class="button-label">Create<br />element</span>
</button>
<ul class="dropdown-menu" data-role="dropdown">
<li><a href="#">Message</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Meeting</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="tab-content-segment">
<button class="fluent-big-button">
<span class="icon-cancel"></span>
<span class="button-label">Delete</span>
</button>
</div>
<div class="tab-content-segment">
<button class="fluent-tool-button"><img src="images/Notebook-Save.png"></button>
<button class="fluent-tool-button"><img src="images/Folder-Rename.png"></button>
<button class="fluent-tool-button"><img src="images/Calendar-Next.png"></button>
</div>
</div>