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 navigation view control provides a collapsible navigation menu for top-level navigation in your app. The most popular HTML, CSS, and JS library in Metro style."> <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>Navigation View - 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="#">Navigation View</a></li> <li class="toc-entry"><a href="#_navview_about">About</a></li> <li class="toc-entry"><a href="#_navview_structure">Structure</a></li> <li class="toc-entry"> <a href="#_navview_pane">Navigation pane</a> <ul> <li class="toc-entry"><a href="#_navview_pane_pull-button">Pull button</a></li> <li class="toc-entry"><a href="#_navview_pane_suggest-box">Suggest box</a></li> <li class="toc-entry"><a href="#_navview_pane_menu">Menu</a></li> <li class="toc-entry"><a href="#_navview_pane_menu-item">Menu item</a></li> <li class="toc-entry"><a href="#_navview_pane_menu-header">Menu header</a></li> <li class="toc-entry"><a href="#_navview_pane_separator">Separator</a></li> </ul> </li> <li class="toc-entry"><a href="#_navview_content">Content area</a></li> <li class="toc-entry"><a href="#_navview_pane-display-modes">Pane display modes</a></li> <li class="toc-entry"><a href="#_navview_events">Events</a></li> <li class="toc-entry"><a href="#_navview_methods">Methods</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>Navigation View</h1> <p class="text-leader"> The navigation view control provides a collapsible navigation menu for top-level navigation in your app. </p>  <h3 id="_navview_about">About</h3> <p> The <code>navigation view</code> control provides a collapsible navigation menu for top-level navigation in your app. This control implements the nav pane, or hamburger menu, pattern and automatically adapts the pane's display mode to different window sizes. To create <code>navigation view</code> component you must define special structure and add role with attribute <code>data-role="navview"</code> to navigation view root. </p> <div class="example p-0" style="height: 500px;"> <div data-role="navview" data-compact="md" data-expanded="lg" data-toggle="#pane-toggle"> <nav class="navview-pane"> <button class="pull-button"> <span class="mif-menu"></span> </button> <div class="suggest-box"> <input type="text" data-role="input" data-clear-button="false" data-search-button="true"> <button class="holder"> <span class="mif-search"></span> </button> </div> <ul class="navview-menu"> <li> <a href="#"> <span class="icon"><span class="mif-home"></span></span> <span class="caption">Home</span> </a> </li> <li class="item-separator"></li> <li class="item-header">Main pages</li> <li> <a href="#"> <span class="icon"><span class="mif-apps"></span></span> <span class="caption">Apps</span> </a> </li> <li class="active"> <a href="#"> <span class="icon"><span class="mif-gamepad"></span></span> <span class="caption">Games</span> </a> </li> <li> <a href="#" class="dropdown-toggle"> <span class="icon"><span class="mif-music"></span></span> <span class="caption">Music</span> </a> <ul class="navview-menu" data-role="dropdown"> <li> <a href="#"> <span class="icon"><span class="mif-gamepad"></span></span> <span class="caption">Games</span> </a> </li> <li> <a href="#"> <span class="icon"><span class="mif-film"></span></span> <span class="caption">Movies</span> </a> </li> </ul> </li> <li class="disabled"> <a href="#"> <span class="icon"><span class="mif-images"></span></span> <span class="caption">Images</span> </a> </li> <li class="item-separator"></li> <li> <a href="#"> <span class="icon"><span class="mif-folder"></span></span> <span class="caption">Documents</span> </a> </li> </ul> </nav> <div class="navview-content pl-4-md pr-4-md"> <h1> <button id="pane-toggle" class="button square d-none-md"><span class="mif-menu" ></span></button> What is? </h1> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <div data-role="panel" data-title-caption="Panel title" data-title-icon="<span class='mif-apps'></span>" data-width="240" data-collapsible="true" data-draggable="true"> Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies. </div> </div> </div> </div> <pre><code class="html"> <div data-role="navview"> ... valid navigation view structure ... </div> </code></pre> <h3 id="_navview_structure">Structure</h3> <p> The <code>navigation view</code> consists two main parts: <code>navigation pane</code> and <code>navigation content</code>. The <code>pane</code> serves to display the menu and <code>content</code> to display main data. </p> <pre><code class="html"> <div data-role="navview"> <div class="navview-pane"> ... </div> <div class="navview-content"> ... </div> </div> </code></pre> <h3 id="_navview_pane">Navigation pane</h3> <p> The navigation pane serves to display a menu and can consist next elements: <code>pull button</code>, <code>suggest box</code>, <code>separator</code> and <code>menu</code> with <code>menu items</code>. </p> <h4 id="_navview_pane_pull-button">Pull button</h4> <p> The <code>pull button</code> serves for change size of navigation pane. </p> <div class="example p-0" style="height: 200px"> <div data-role="navview" data-expanded="fs" data-compact="false"> <div class="navview-pane"> <button class="pull-button"> <span class="default-icon-menu"></span> </button> </div> </div> </div> <pre><code class="html"> <div class="navview-pane"> <button class="pull-button"> <span class="default-icon-menu"></span> </button> </div> </code></pre> <h4 id="_navview_pane_suggest-box">Suggest box</h4> <p> The <code>suggest box</code> is intended for displaying input fields, for example, a field for searching and must consist <code>input field</code> and input <code>holder</code> for compact mode. </p> <div class="example p-0" style="height: 200px"> <div data-role="navview" data-expanded="fs" data-compact="false"> <div class="navview-pane"> <button class="pull-button"> <span class="default-icon-menu"></span> </button> <div class="suggest-box"> <input type="text" data-role="input" data-clear-button="false" data-search-button="true"> <button class="holder"> <span class="mif-search"></span> </button> </div> </div> </div> </div> <pre><code class="html"> <div class="navview-pane"> <div class="suggest-box"> <input type="text" data-role="input" data-clear-button="false" data-search-button="true"> <button class="holder"> <span class="mif-search"></span> </button> </div> </div> </code></pre> <h4 id="_navview_pane_menu">Menu</h4> <p> For navigation you can create <code>navigation view menu</code>. To create it use <code><ul></code> and list items with anchor. </p> <div class="example p-0" style="height: 300px;"> <div data-role="navview" data-expanded="fs" data-compact="false"> <div class="navview-pane"> <button class="pull-button"> <span class="default-icon-menu"></span> </button> <ul class="navview-menu"> <li class="item-header">Main pages</li> <li> <a href="#"> <span class="icon"><span class="mif-apps"></span></span> <span class="caption">Apps</span> </a> </li> <li class="item-separator"></li> <li class="item-header">Office</li> <li> <a href="#"> <span class="icon"><span class="mif-file-word"></span></span> <span class="caption">Word</span> </a> </li> <li> <a href="#"> <span class="icon"><span class="mif-file-excel"></span></span> <span class="caption">Excel</span> </a> </li> </ul> </div> </div> </div> <h4 id="_navview_pane_menu-item">Menu item</h4> <p> To create <code>menu item</code> use list item with anchor and two internal elements: icon and caption. </p> <pre><code class="html"> <li> <a href="#"> <span class="icon"><span class="mif-apps"></span></span> <span class="caption">Apps</span> </a> </li> </code></pre> <h4 id="_navview_pane_menu-header">Menu header</h4> <p> You can precede each group of menu item with a special header element. </p> <pre><code class="html"> <li class="item-header">Office</li> </code></pre> <h4 id="_navview_pane_separator">Separator</h4> <p> Between navigation pane elements you can insert <code>separator</code> to divide them. To create <code>separator</code>, add element (example <code><div></code>) with class <code>.item-separator</code>. </p> <pre><code class="html"> <ul class="navview-menu"> <li class="item-header">Main pages</li> <li> <a href="#"> <span class="icon"><span class="mif-apps"></span></span> <span class="caption">Apps</span> </a> </li> <li class="item-separator"></li> <li class="item-header">Office</li> <li> <a href="#"> <span class="icon"><span class="mif-file-word"></span></span> <span class="caption">Word</span> </a> </li> <li> <a href="#"> <span class="icon"><span class="mif-file-excel"></span></span> <span class="caption">Excel</span> </a> </li> </ul> </code></pre>  <h3 id="_navview_content">Content area</h3> <p> To display main data you must use element with class <code>.navview-content</code>. </p> <div class="example p-0" style="height: 200px"> <div data-role="navview" data-expanded="md" data-compact="fs"> <div class="navview-pane"> <button class="pull-button"> <span class="default-icon-menu"></span> </button> </div> <div class="navview-content d-flex flex-align-center flex-justify-center h-100"> ... This is navigation view content area ... </div> </div> </div> <pre><code class="html"> <div data-role="navview"> <div class="navview-pane"> <button class="pull-button"> <span class="default-icon-menu"></span> </button> </div> <div class="navview-content d-flex flex-align-center flex-justify-center h-100"> ... This is navigation view content area ... </div> </div> </code></pre> <h3 id="_navview_pane-display-modes">Pane display modes</h3> <p> You can define behavior of navigation view pane with attributes <code>data-compact</code> and <code>data-expanded</code>. Values for these attributes must be a set of: </p> <ul> <li><code>fs</code> - min-with: 0px</li> <li><code>sm</code> - min-with: 576px</li> <li><code>md</code> - min-with: 768px</li> <li><code>lg</code> - min-with: 992px</li> <li><code>xl</code> - min-with: 1200px</li> <li><code>xxl</code> - min-with: 1452px</li> </ul> <p> By default used <code>md</code> for compact and <code>lg</code> for expanded mode. </p> <pre><code class="html"> <div data-role="navview" data-expanded="lg" data-compact="md">...</div> <div data-role="navview" data-expanded="fs" data-compact="false">...</div> </code></pre> <h3 id="_navview_events">Events</h3> <p> When navigation view works, it generated a number of events. You can use callbacks to these events to interact with it. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Events</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onNavigationViewCreate(elem)</code></td> <td><code>data-on-navigation-view-create</code></td> <td>Fired when navigation view was created</td> </tr> </tbody> </table> <h3 id="_navview_methods">Methods</h3> <p> To interact with component you can use navview methods. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Method</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>open()</code></td> <td>Use this method to open navigation view pane</td> </tr> <tr> <td><code>close()</code></td> <td>Use this method to close navigation view pane</td> </tr> </tbody> </table> <pre><code> var nv = $("#navview1").data("navview"); nv.open(); nv.close(); </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/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>