metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The Metro 4 provides any classes to create different cool menu, as horizontal, vertical, tool and others."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Menu - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Menu</a></li> <li class="toc-entry"> <a href="#">Horizontal</a> <ul> <li class="toc-entry"><a href="#_h_menu_dropdown">Dropdown</a></li> <li class="toc-entry"><a href="#_h_menu_no_hover">No hover</a></li> <li class="toc-entry"><a href="#_h_menu_large">Large</a></li> <li class="toc-entry"><a href="#_h_menu_mega">Mega</a></li> </ul> </li> <li class="toc-entry"><a href="#_v_menu">Vertical menu</a></li> <li class="toc-entry"> <a href="#_t_menu">Tool menu</a> <ul> <li class="toc-entry"><a href="#_t_menu_dropdown">Dropdown</a></li> </ul> </li> <li class="toc-entry"> <a href="#_d_menu">Dropdown menu</a> <ul> <li class="toc-entry"><a href="#_d_menu_context">Context</a></li> </ul> </li> <li class="toc-entry"><a href="#_menu_hotkeys">Hotkeys</a></li> <li class="toc-entry"><a href="#_menu_color">Menu color</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Menu</h1> <p class="text-leader"> The Metro 4 provides any classes to create different cool menu, as horizontal, vertical, tool and others. 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. </p>  <h3 id="_h_menu">Horizontal menu</h3> <p> To create horizontal menu add class <code>.h-menu</code> to list. </p> <div class="example"> <ul class="h-menu mb-2"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </div> <pre class=""><code> <ul class="h-menu"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </code></pre> <h4 id="_h_menu_dropdown">Horizontal menu with dropdown</h4> <div class="example"> <ul class="h-menu"> <li><a href="#">Home</a></li> <li> <a id="_test1" 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 10</a></li> <li><a href="#">Windows Server</a></li> <li class="divider"></li> <li><a href="#">MS-DOS</a></li> </ul> </li> <li><a href="#">Skype</a></li> <li class="divider"></li> <li><a href="#">Office</a></li> </ul> </li> <li> <a id="_test2" href="#" class="dropdown-toggle">Products 2</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 10</a></li> <li><a href="#">Windows Server</a></li> <li class="divider"></li> <li><a href="#">MS-DOS</a></li> </ul> </li> <li><a href="#">Skype</a></li> <li class="divider"></li> <li><a href="#">Office</a></li> </ul> </li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </div> <pre class=""><code> <ul class="h-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="#" class="dropdown-toggle">Windows</a> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Windows 10</a></li> <li><a href="#">Windows Server</a></li> <li class="divider"></li> <li><a href="#">MS-DOS</a></li> </ul> </li> <li><a href="#">Skype</a></li> <li class="divider"></li> <li><a href="#">Office</a></li> </ul> </li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </code></pre> <h4 id="_h_menu_no_hover">Horizontal menu with disabled hover effect</h4> <div class="example"> <ul class="h-menu no-hover"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </div> <pre class=""><code> <ul class="h-menu no-hover"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </code></pre> <h4 id="_h_menu_large">Horizontal menu with class .large</h4> <div class="example"> <ul class="h-menu large"> <li><a href="#">Home</a></li> <li><a href="#" class="dropdown-toggle">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </div> <pre class=""><code> <ul class="h-menu large"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> </code></pre> <h4 id="_h_menu_mega">Mega menu</h4> <div class="example"> <ul class="h-menu mega"> <li><a href="#">Home</a></li> <li> <a href="#" class="dropdown-toggle">Products</a> <div class="mega-container p-2 border-top bd-gray" data-role="dropdown"> <div class="row"> <div class="cell-md-6"> <h2 class="text-light">Metro 4</h2> <p> Is an open source toolkit for developing with HTML, CSS, and JS for build your site Windows Metro style. </p> </div> <div class="cell-md-6"> <h4>Begin with Metro 4</h4> <ul class="unstyled-list pl-0"> <li><a href="#">Getting started</a></li> <li><a href="#">Base CSS</a></li> <li><a href="#">Components</a></li> <li><a href="#">Utilities</a></li> </ul> </div> </div> </div> </li> <li> <a href="#" class="dropdown-toggle">Support</a> <div class="mega-container" data-role="dropdown"> <ul class="h-menu"> <li><a href="#">Blog</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Github</a></li> <li><a href="#">Community</a></li> </ul> </div> </li> <li><a href="#">Cart</a></li> </ul> </div> <pre class=""><code> <ul class="h-menu mega"> <li><a href="#">Home</a></li> <li> <a href="#" class="dropdown-toggle">Products</a> <div class="mega-container p-2" data-role="dropdown"> <div class="row"> <div class="cell-md-6"> <h2 class="text-light">Metro 4</h2> <p> Is an open source toolkit for developing with ... </p> </div> <div class="cell-md-6"> <h4>Begin with Metro 4</h4> <ul class="unstyled-list pl-0"> <li><a href="#">Getting started</a></li> <li><a href="#">Base CSS</a></li> <li><a href="#">Components</a></li> <li><a href="#">Utilities</a></li> </ul> </div> </div> </div> </li> <li> <a href="#" class="dropdown-toggle">Support</a> <div class="mega-container" data-role="dropdown"> <ul class="h-menu"> <li><a href="#">Blog</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Github</a></li> <li><a href="#">Community</a></li> </ul> </div> </li> <li><a href="#">Cart</a></li> </ul> </code></pre>  <h3 id="_v_menu">Vertical menu</h3> <p> The vertical menu is intended, first of all, to create sidebar menus of your site. To create vertical menu add class <code>.v-menu</code> to list. </p> <div class="example clear"> <ul class="v-menu" style="width: 220px;"> <li class="menu-title">General</li> <li><a href="#"><span class="mif-home icon"></span> Home</a></li> <li class="menu-title">Products</li> <li><a href="#"><span class="mif-windows icon"></span> Windows</a></li> <li class="disabled"><a href="#"><span class="mif-library icon"></span> Office 365</a></li> <li><a href="#"><span class="mif-skype icon"></span> Skype</a></li> <li class="menu-title">Support</li> <li> <a href="#" data-hotkey="Alt+F1">Community</a> <ul class="v-menu" data-role="dropdown"> <li><a href="#">Blog</a></li> <li><a href="#">Github</a></li> <li><a href="#">Forum</a></li> <li class="divider"></li> <li class="p-2 bg-light"> <button class="button square primary"><span class="mif-target"></span></button> <button class="button square success"><span class="mif-apps"></span></button> <button class="button square alert"><span class="mif-file-code"></span></button> <button class="button square warning"><span class="mif-download"></span></button> </li> </ul> </li> <li class="menu-title">Shop</li> <li><a href="#"><span class="mif-cart icon"></span> Cart</a></li> </ul> </div> <pre class=""><code> <ul class="v-menu"> <li class="menu-title">General</li> <li><a href="#"><span class="mif-home icon"></span> Home</a></li> <li class="menu-title">Products</li> <li><a href="#"><span class="mif-windows icon"></span> Windows</a></li> <li><a href="#"><span class="mif-library icon"></span> Office 365</a></li> <li><a href="#"><span class="mif-skype icon"></span> Skype</a></li> <li class="menu-title">Support</li> <li> <a href="#" data-hotkey="Alt+F1">Community</a> <ul class="v-menu" data-role="dropdown"> <li><a href="#">Blog</a></li> <li><a href="#">Github</a></li> <li><a href="#">Forum</a></li> <li class="divider"></li> <li class="p-2 bg-light"> <button class="button square primary"><span class="mif-target"></span></button> <button class="button square success"><span class="mif-apps"></span></button> <button class="button square alert"><span class="mif-file-code"></span></button> <button class="button square warning"><span class="mif-download"></span></button> </li> </ul> </li> <li class="menu-title">Shop</li> <li><a href="#"><span class="mif-cart icon"></span> Cart</a></li> </ul> </code></pre> <h3 id="_t_menu">Tool menu</h3> <p> If you need to create cool compact tool menu, you can user class <code>.t-menu</code>. </p> <div class="example clear"> <ul class="t-menu open m-1"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> <ul class="t-menu open compact m-1"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> <ul class="t-menu open horizontal m-1"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> <ul class="t-menu open horizontal compact m-1"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> </div> <pre class=""><code> <ul class="t-menu open"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> <ul class="t-menu open compact"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> <ul class="t-menu open horizontal"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> <ul class="t-menu open horizontal compact"> <li><a href="#"><span class="mif-apps icon"></span></a></li> <li><a href="#"><span class="mif-laptop icon"></span></a></li> <li><a href="#"><span class="mif-bubbles icon"></span></a></li> <li><a href="#"><span class="mif-bubble icon"></span></a></li> <li><a href="#"><span class="mif-user icon"></span></a></li> </ul> </code></pre> <h4 id="_t_menu_dropdown">Tools menu dropdown</h4> <div class="example clear"> <ul class="t-menu open m-1"> <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> <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 open m-1"> <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 compact horizontal" 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-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> </div> <pre class=""><code> <ul class="t-menu open"> <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> <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 open"> <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 compact horizontal" 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-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> </code></pre> <h3 id="_d_menu">Dropdown menu</h3> <p> With Metro 4 you can create dropdown menu simple and easy for any element. </p> <div class="example clear mb-2"> <ul class="d-menu open pos-static"> <li><a href="#"><span class="mif-user icon"></span> Profile</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Photo</a></li> <li class="divider"></li> <li><a href="#"><span class="mif-target icon"></span> Location</a></li> </ul> </div> <p class="text-bold"> To create dropdown menu: </p> <ol class="decimal"> <li>Create container with a position different from <code>statics</code></li> <li>Add toggles with class <code>.dropdown-toggle</code></li> <li>Add menu with class <code>.d-menu</code> and attribute <code>data-role="dropdown"</code></li> <li>To display the menu up add class <code>.drop-up</code> to menu</li> <li>To display the menu left class <code>.drop-left</code> to menu</li> <li>To display the menu right add class <code>.drop-right</code> to menu</li> <li>To hide dropdown toggle marker add class <code>.no-marker</code> to toggle</li> </ol> <div class="example d-flex"> <div class="pos-relative"> <button class="button dropdown-toggle">Menu toggle</button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="pos-relative"> <a class="button link dropdown-toggle">Menu toggle</a> <ul class="d-menu" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="pos-relative"> <button class="button square alert dropdown-toggle"><span class="mif-apps"></span></button> <ul class="d-menu bg-red fg-white" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="pos-relative ml-1"> <button class="button success dropdown-toggle no-marker">Drop Up</button> <ul class="d-menu drop-up" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="pos-relative ml-1"> <button class="button success dropdown-toggle">Drop Right</button> <ul class="d-menu drop-right" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="pos-relative ml-1"> <button class="button success dropdown-toggle">Drop Left</button> <ul class="d-menu drop-left" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> </div> <pre class=""><code> <div class="pos-relative"> <button class="button dropdown-toggle">Menu toggle</button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="pos-relative"> <a class="button link dropdown-toggle">Menu toggle</a> <ul class="d-menu" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> <div class="pos-relative"> <button class="button square dropdown-toggle"> <span class="mif-apps"></span> </button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div> </code></pre> <h4 id="_d_menu_context">Context menu</h4> <p> Context menu is a kind of drop-down menu, with reduced size of menu items. </p> <div class="example"> <div class="row flex-justify-start"> <div class="cell-auto m-1"> <ul class="d-menu open context pos-static"> <li><a href="#"><span class="mif-user icon"></span> Profile</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Photo</a></li> <li class="divider"></li> <li><a href="#"><span class="mif-target icon"></span> Location</a></li> </ul> </div> <div class="cell-auto m-1"> <a class="button" id="context_toggle">Open context menu</a> <ul class="d-menu context" data-role="dropdown" data-toggle-element="#context_toggle"> <li><a href="#"><span class="mif-user icon"></span> Profile</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Photo</a></li> <li class="divider"></li> <li><a href="#"><span class="mif-target icon"></span> Location</a></li> </ul> </div> </div> </div> <pre class=""><code> <a class="button" id="context_toggle">Open context menu</a> <ul class="d-menu context" data-role="dropdown" data-toggle-element="#context_toggle"> <li><a href="#"><span class="mif-user icon"></span> Profile</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Photo</a></li> <li class="divider"></li> <li><a href="#"><span class="mif-target icon"></span> Location</a></li> </ul> </code></pre>  <h3 id="_menu_hotkeys">Hotkeys</h3> <p> All menus supports hotkey binding to elements. To bind hotkey add attribute <code>data-hotkey="*"</code> to menu <code>a</code> element. </p> <div class="example clear"> <ul class="d-menu open pos-static"> <li><a href="#" data-hotkey="Alt+Q" onclick="alert('Alt+Q')">Test Alt+Q</a></li> <li><a href="#" data-hotkey="Alt+W" onclick="alert('Alt+W')">Test Alt+W</a></li> <li><a href="#" data-hotkey="Ctrl+F1" onclick="alert('Ctrl+F1')">Test Ctrl+F1</a></li> </ul> </div> <pre class=""><code> <ul class="d-menu open pos-static" style="width: 220px"> <li><a href="#" data-hotkey="Alt+Q" onclick="alert('Alt+Q')">Test Alt+Q</a></li> <li><a href="#" data-hotkey="Alt+W" onclick="alert('Alt+W')">Test Alt+W</a></li> <li><a href="#" data-hotkey="Ctrl+F1" onclick="alert('Ctrl+F1')">Test Ctrl+F1</a></li> </ul> </code></pre> <h3 id="_menu_color">Menu color</h3> <p> If you need a menu of a certain color, it's nothing easier, add classes for background color and tex color to your menu. </p> <div class="example clear"> <ul class="h-menu bg-red fg-white m-1"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> <ul class="d-menu open pos-static bg-green fg-white m-1"> <li><a href="#"><span class="mif-user icon"></span> Profile</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Photo</a></li> <li class="divider"></li> <li><a href="#"><span class="mif-target icon"></span> Location</a></li> </ul> <ul class="t-menu horizontal open m-1 bg-cyan fg-white"> <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 bg-pink fg-white" 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 bg-brown fg-white" 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-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> </div> <pre class=""><code> <ul class="h-menu bg-red fg-white"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> <li><a href="#">Cart</a></li> </ul> <ul class="d-menu open pos-static bg-green fg-white"> <li><a href="#"><span class="mif-user icon"></span> Profile</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Photo</a></li> <li class="divider"></li> <li><a href="#"><span class="mif-target icon"></span> Location</a></li> </ul> <ul class="t-menu horizontal open bg-cyan fg-white"> <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 bg-pink fg-white" 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 bg-brown fg-white" 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-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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/h