Fluent menu

@@adsense
Metro UI CSS represents styles to create Ribbon Menu (Fluent Menu).
Clipboard
Reply
Search
Clipboard
Reply
Clipboard

                <div class="fluent-menu" data-role="fluentmenu">
                    <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>
            

Menu elements

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 mif-*, icon or img.


            <div class="tab-group-content">
                <button class="fluent-big-button"><span class="mif-envelop"></span>Create<br />message</button>
                <div class="tab-content-segment">
                    <button class="fluent-big-button dropdown-toggle">
                        <span class="mif-pictures"></span>
                        <span class="label">Create<br />element</span>
                    </button>
                    <ul class="d-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="mif-cancel"></span>
                        <span class="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>