formstone
Version:
Library of modular front end components.
1 lines • 27 kB
JSON
{"main":["navigation.js","navigation.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"gravity","type":"string","default":"'left'","description":"Gravity of 'push', 'reveal' and 'overlay' navigation; 'right', 'left'"},{"name":"label","type":"boolean","default":"true","description":"Display handle width label"},{"name":"labels.closed","type":"string","default":"'Menu'","description":"Closed state text"},{"name":"labels.open","type":"string","default":"'Close'","description":"Open state text"},{"name":"maxWidth","type":"string","default":"'980px'","description":"Width at which to auto-disable plugin"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"type","type":"string","default":"'toggle'","description":"Type of navigation; 'toggle', 'push', 'reveal', 'overlay'"}],"events":[{"name":"open.navigation","description":"Navigation opened"},{"name":"close.navigation","description":"Navigation closed"}],"methods":[{"name":"close","description":"Closes instance.","examples":["$(\".target\").navigation(\"close\");"]},{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.navigation(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").navigation(\"destroy\");"]},{"name":"disable","description":"Disables instance.","examples":["$(\".target\").navigation(\"disable\");"]},{"name":"enable","description":"Enables instance.","examples":["$(\".target\").navigation(\"enable\");"]},{"name":"open","description":"Opens instance.","examples":["$(\".target\").navigation(\"open\");"]}],"name":"Navigation","type":"widget","description":"A jQuery plugin for simple responsive navigation.","dependencies":["jQuery","core.js","mediaquery.js","swap.js"],"css":[{"name":".fs-navigation-element","type":"element","description":"Target elmement"},{"name":".fs-navigation","type":"element","description":"Base widget class"},{"name":".fs-navigation-toggle-nav","type":"element","description":"Toggle navigation"},{"name":".fs-navigation-toggle-nav.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-toggle-nav.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-toggle-handle","type":"element","description":"Toggle handle"},{"name":".fs-navigation-toggle-handle.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-toggle-handle.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-overlay-nav","type":"element","description":"Overlay nav"},{"name":".fs-navigation-overlay-nav.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-overlay-nav.fs-navigation-animated","type":"modifier","description":"Indicates animated state"},{"name":".fs-navigation-overlay-nav.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-overlay-left-nav","type":"modifier","description":"Indicates left hand nav"},{"name":".fs-navigation-overlay-right-nav","type":"modifier","description":"Indicates right hand nav"},{"name":".fs-navigation-push-nav","type":"element","description":"Push nav"},{"name":".fs-navigation-push-nav.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-push-nav.fs-navigation-animated","type":"modifier","description":"Indicates animated state"},{"name":".fs-navigation-push-nav.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-push-left-nav","type":"modifier","description":"Indicates left hand nav"},{"name":".fs-navigation-push-right-nav","type":"modifier","description":"Indicates right hand nav"},{"name":".fs-navigation-reveal-nav","type":"element","description":"Reveal nav"},{"name":".fs-navigation-reveal-nav.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-reveal-nav.fs-navigation-animated","type":"modifier","description":"Indicates animated state"},{"name":".fs-navigation-reveal-nav.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-reveal-left-nav","type":"modifier","description":"Indicates left hand nav"},{"name":".fs-navigation-reveal-right-nav","type":"modifier","description":"Indicates right hand nav"},{"name":".fs-navigation-overlay-handle","type":"element","description":"Overlay handle"},{"name":".fs-navigation-overlay-handle.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-push-handle","type":"element","description":"Push handle"},{"name":".fs-navigation-push-handle.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-overlay-content:before","type":"element","description":"Overlay mask"},{"name":".fs-navigation-overlay-content.fs-navigation-open:before","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-push-content","type":"element","description":"Target page content"},{"name":".fs-navigation-push-content.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-push-content.fs-navigation-animated","type":"modifier","description":"Indicates animted state"},{"name":".fs-navigation-push-content.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-push-left-content","type":"modifier","description":"Indicates left hand nav"},{"name":".fs-navigation-push-right-content","type":"modifier","description":"Indicates right hand nav"},{"name":".fs-navigation-reveal-content","type":"element","description":"Target page content"},{"name":".fs-navigation-reveal-content.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-reveal-content.fs-navigation-animated","type":"modifier","description":"Indicates animted state"},{"name":".fs-navigation-reveal-content.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-reveal-left-content","type":"modifier","description":"Indicates left hand nav"},{"name":".fs-navigation-reveal-right-content","type":"modifier","description":"Indicates right hand nav"},{"name":".fs-navigation-handle","type":"element","description":"Click target to toggle navigation"},{"name":".fs-navigation-handle.fs-navigation-open","type":"modifier","description":"Indicates open state"},{"name":".fs-navigation-handle.fs-navigation-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-navigation-lock","type":"modifier","description":"Indicates locked state; Applied to body element"}],"use":"### Basic\n\nNavigation will automatically turn a basic navigation into a mobile friendly system. Links can be styled independently:\n\n```javascript\n$(\"nav\").navigation();\n```\n\n```markup\n<h4 id=\"handle\">Navigation</h4>\n<nav data-navigation-handle=\"#handle\">\n <a href=\"#\">Home</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n</nav>\n```\n\n### Breakpoint\n\nBy default, Navigation will enable itself on screens smaller then 980 pixels wide. Specify a different width by setting the `maxWidth` option on initialization.\n\n```javascript\n$(\"nav\").navigation({\n maxWidth: \"740px\"\n});\n```\n\n### Off Canvas\n\nNavigation can also slide out from the left or right hand side of the screen. The nav can 'push' the main page content by specifying the `data-navigation-content` attribute:\n\n```javascript\n$(\"nav\").navigation();\n```\n\n```markup\n<h4 id=\"handle\">Navigation</h4>\n<nav data-navigation-handle=\"#handle\" data-navigation-content=\"#content\">\n <a href=\"#\">Home</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n</nav>\n<div id=\"content\">\n ...\n</nav>\n```\n\n<h3>Events</h3>\n\nReact to the navigation by listening for the `open.navigation` and `close.navigation` events:\n\n```javascript\n$(\"nav\").on(\"open.navigation\", function() {\n // ...\n}).on(\"close.navigation\", function() {\n // ...\n});\n```\n","demo":"<h4>Basic</h4>\n<p>By default, Navigation will only activate itself on screens smaller than 980px. Resize your screen if the menu is not active.</p>\n\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <h5 class=\"nav_handle nav_handle_toggle\">Menu</h5>\n <nav class=\"js-navigation\" data-navigation-handle=\".nav_handle_toggle\" data-navigation-options='{}'>\n <a href=\"#\">Home</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n </nav>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><h5 class="nav_handle">Menu</h5>\n<nav class="navigation" data-navigation-handle=".nav_handle">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation();</code></pre>\n </div>\n</div>\n\n<h4>No Max</h4>\n\n<!-- START: FIRSTDEMO -->\n\n<style>\n @media screen and (min-width: 980px) {\n .nav_offscreen,\n .nav_handle {\n display: none;\n }\n }\n\n .nav_handle.fs-navigation-overlay-handle.fs-navigation-enabled,\n .nav_handle.fs-navigation-reveal-handle.fs-navigation-enabled,\n .nav_handle.fs-navigation-push-handle.fs-navigation-enabled {\n clear: both;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n</style>\n\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <h5 class=\"nav_handle nav_handle_toggle_2\">Menu</h5>\n <nav class=\"js-navigation\" data-navigation-handle=\".nav_handle_toggle_2\" data-navigation-options='{\"maxWidth\":\"10000px\"}'>\n <a href=\"#\">Home</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n </nav>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><h5 class="nav_handle">Menu</h5>\n<nav class="navigation" data-navigation-handle=".nav_handle">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n maxWidth: \"10000px\"\n});</code></pre>\n </div>\n</div>\n\n<!-- END: FIRSTDEMO -->\n\n<h4>No Theme</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <h5 class=\"nav_handle nav_handle_toggle2\">Menu</h5>\n <nav class=\"js-navigation\" data-navigation-handle=\".nav_handle_toggle2\" data-navigation-options='{\"theme\":\"\"}'>\n <a href=\"#\">Home</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n </nav>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><h5 class="nav_handle">Menu</h5>\n<nav class="navigation" data-navigation-handle=".nav_handle">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n theme: \"\"\n});</code></pre>\n </div>\n</div>\n\n<h4>Off Canvas - Overlay Left</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <button type=\"button\" class=\"button nav_handle nav_handle_overlay_left\">Menu</button>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="nav_content">\n	<button type="button" class="nav_handle">Menu</button>\n</div>\n<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n type: \"overlay\",\n gravity: \"left\",\n maxWidth: \"10000px\"\n});</code></pre>\n </div>\n</div>\n\n<h4>Off Canvas - Overlay Right</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <button type=\"button\" class=\"button nav_handle nav_handle_overlay_right\">Menu</button>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="nav_content">\n	<button type="button" class="nav_handle">Menu</button>\n</div>\n<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n type: \"overlay\",\n gravity: \"right\",\n maxWidth: \"10000px\"\n});</code></pre>\n </div>\n</div>\n\n<h4>Off Canvas - Reveal Left</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <button type=\"button\" class=\"button nav_handle nav_handle_reveal_left\">Menu</button>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="nav_content">\n	<button type="button" class="nav_handle">Menu</button>\n</div>\n<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n type: \"reveal\",\n gravity: \"left\",\n maxWidth: \"10000px\"\n});</code></pre>\n </div>\n</div>\n\n<h4>Off Canvas - Reveal Right</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <button type=\"button\" class=\"button nav_handle nav_handle_reveal_right\">Menu</button>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="nav_content">\n	<button type="button" class="nav_handle">Menu</button>\n</div>\n<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n type: \"reveal\",\n gravity: \"right\",\n maxWidth: \"10000px\"\n});</code></pre>\n </div>\n</div>\n\n<h4>Off Canvas - Push Left</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <button type=\"button\" class=\"button nav_handle nav_handle_push_left\">Menu</button>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="nav_content">\n	<button type="button" class="nav_handle">Menu</button>\n</div>\n<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n type: \"push\",\n gravity: \"left\",\n maxWidth: \"10000px\"\n});</code></pre>\n </div>\n</div>\n\n<h4>Off Canvas - Push Right</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <button type=\"button\" class=\"button nav_handle nav_handle_push_right\">Menu</button>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="nav_content">\n	<button type="button" class="nav_handle">Menu</button>\n</div>\n<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">\n	<a href="#">One</a>\n	<a href="#">Two</a>\n	<a href="#">Three</a>\n</nav></code></pre>\n <pre><code class=\"language-javascript\">$(\".navigation\").navigation({\n type: \"push\",\n gravity: \"right\",\n maxWidth: \"10000px\"\n});</code></pre>\n </div>\n</div>\n\n\n<div class=\"js-navigation_elements\">\n\n <nav class=\"nav_offscreen js-navigation\" data-navigation-handle=\".nav_handle_overlay_left\" data-navigation-content=\".demo_content\" data-navigation-options='{\"type\":\"overlay\",\"gravity\":\"left\",\"maxWidth\":\"10000px\"}'>\n Overlay Left\n </nav>\n\n <nav class=\"nav_offscreen js-navigation\" data-navigation-handle=\".nav_handle_overlay_right\" data-navigation-content=\".demo_content\" data-navigation-options='{\"type\":\"overlay\",\"gravity\":\"right\",\"maxWidth\":\"10000px\"}'>\n Overlay Right\n </nav>\n\n <nav class=\"nav_offscreen js-navigation\" data-navigation-handle=\".nav_handle_reveal_left\" data-navigation-content=\".demo_content\" data-navigation-options='{\"type\":\"reveal\",\"gravity\":\"left\",\"maxWidth\":\"10000px\"}'>\n Reveal Left\n </nav>\n\n <nav class=\"nav_offscreen js-navigation\" data-navigation-handle=\".nav_handle_reveal_right\" data-navigation-content=\".demo_content\" data-navigation-options='{\"type\":\"reveal\",\"gravity\":\"right\",\"maxWidth\":\"10000px\"}'>\n Reveal Right\n </nav>\n\n <nav class=\"nav_offscreen js-navigation\" data-navigation-handle=\".nav_handle_push_left\" data-navigation-content=\".demo_content\" data-navigation-options='{\"type\":\"push\",\"gravity\":\"left\",\"maxWidth\":\"10000px\"}'>\n Push Left\n </nav>\n\n <nav class=\"nav_offscreen js-navigation\" data-navigation-handle=\".nav_handle_push_right\" data-navigation-content=\".demo_content\" data-navigation-options='{\"type\":\"push\",\"gravity\":\"right\",\"maxWidth\":\"10000px\"}'>\n Push Right\n </nav>\n</div>\n","document":"# Navigation\n\nA jQuery plugin for simple responsive navigation.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Navigation\n\n\n#### Main\n\n```markup\nnavigation.js\nnavigation.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nmediaquery.js\nswap.js\n```\n\n### Basic\n\nNavigation will automatically turn a basic navigation into a mobile friendly system. Links can be styled independently:\n\n```javascript\n$(\"nav\").navigation();\n```\n\n```markup\n<h4 id=\"handle\">Navigation</h4>\n<nav data-navigation-handle=\"#handle\">\n <a href=\"#\">Home</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n</nav>\n```\n\n### Breakpoint\n\nBy default, Navigation will enable itself on screens smaller then 980 pixels wide. Specify a different width by setting the `maxWidth` option on initialization.\n\n```javascript\n$(\"nav\").navigation({\n maxWidth: \"740px\"\n});\n```\n\n### Off Canvas\n\nNavigation can also slide out from the left or right hand side of the screen. The nav can 'push' the main page content by specifying the `data-navigation-content` attribute:\n\n```javascript\n$(\"nav\").navigation();\n```\n\n```markup\n<h4 id=\"handle\">Navigation</h4>\n<nav data-navigation-handle=\"#handle\" data-navigation-content=\"#content\">\n <a href=\"#\">Home</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n</nav>\n<div id=\"content\">\n ...\n</nav>\n```\n\n<h3>Events</h3>\n\nReact to the navigation by listening for the `open.navigation` and `close.navigation` events:\n\n```javascript\n$(\"nav\").on(\"open.navigation\", function() {\n // ...\n}).on(\"close.navigation\", function() {\n // ...\n});\n```\n\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-navigation-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `gravity` | `string` | `'left'` | Gravity of 'push', 'reveal' and 'overlay' navigation; 'right', 'left' |\n| `label` | `boolean` | `true` | Display handle width label |\n| `labels.closed` | `string` | `'Menu'` | Closed state text |\n| `labels.open` | `string` | `'Close'` | Open state text |\n| `maxWidth` | `string` | `'980px'` | Width at which to auto-disable plugin |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `type` | `string` | `'toggle'` | Type of navigation; 'toggle', 'push', 'reveal', 'overlay' |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `open.navigation` | Navigation opened |\n| `close.navigation` | Navigation closed |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### close\n\nCloses instance.\n\n```javascript\n$(\".target\").navigation(\"close\");\n```\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.navigation(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").navigation(\"destroy\");\n```\n\n### disable\n\nDisables instance.\n\n```javascript\n$(\".target\").navigation(\"disable\");\n```\n\n### enable\n\nEnables instance.\n\n```javascript\n$(\".target\").navigation(\"enable\");\n```\n\n### open\n\nOpens instance.\n\n```javascript\n$(\".target\").navigation(\"open\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-navigation-element` | `element` | Target elmement |\n| `.fs-navigation` | `element` | Base widget class |\n| `.fs-navigation-toggle-nav` | `element` | Toggle navigation |\n| `.fs-navigation-toggle-nav.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-toggle-nav.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-toggle-handle` | `element` | Toggle handle |\n| `.fs-navigation-toggle-handle.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-toggle-handle.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-overlay-nav` | `element` | Overlay nav |\n| `.fs-navigation-overlay-nav.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-overlay-nav.fs-navigation-animated` | `modifier` | Indicates animated state |\n| `.fs-navigation-overlay-nav.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-overlay-left-nav` | `modifier` | Indicates left hand nav |\n| `.fs-navigation-overlay-right-nav` | `modifier` | Indicates right hand nav |\n| `.fs-navigation-push-nav` | `element` | Push nav |\n| `.fs-navigation-push-nav.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-push-nav.fs-navigation-animated` | `modifier` | Indicates animated state |\n| `.fs-navigation-push-nav.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-push-left-nav` | `modifier` | Indicates left hand nav |\n| `.fs-navigation-push-right-nav` | `modifier` | Indicates right hand nav |\n| `.fs-navigation-reveal-nav` | `element` | Reveal nav |\n| `.fs-navigation-reveal-nav.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-reveal-nav.fs-navigation-animated` | `modifier` | Indicates animated state |\n| `.fs-navigation-reveal-nav.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-reveal-left-nav` | `modifier` | Indicates left hand nav |\n| `.fs-navigation-reveal-right-nav` | `modifier` | Indicates right hand nav |\n| `.fs-navigation-overlay-handle` | `element` | Overlay handle |\n| `.fs-navigation-overlay-handle.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-push-handle` | `element` | Push handle |\n| `.fs-navigation-push-handle.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-overlay-content:before` | `element` | Overlay mask |\n| `.fs-navigation-overlay-content.fs-navigation-open:before` | `modifier` | Indicates open state |\n| `.fs-navigation-push-content` | `element` | Target page content |\n| `.fs-navigation-push-content.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-push-content.fs-navigation-animated` | `modifier` | Indicates animted state |\n| `.fs-navigation-push-content.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-push-left-content` | `modifier` | Indicates left hand nav |\n| `.fs-navigation-push-right-content` | `modifier` | Indicates right hand nav |\n| `.fs-navigation-reveal-content` | `element` | Target page content |\n| `.fs-navigation-reveal-content.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-reveal-content.fs-navigation-animated` | `modifier` | Indicates animted state |\n| `.fs-navigation-reveal-content.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-reveal-left-content` | `modifier` | Indicates left hand nav |\n| `.fs-navigation-reveal-right-content` | `modifier` | Indicates right hand nav |\n| `.fs-navigation-handle` | `element` | Click target to toggle navigation |\n| `.fs-navigation-handle.fs-navigation-open` | `modifier` | Indicates open state |\n| `.fs-navigation-handle.fs-navigation-enabled` | `modifier` | Indicates enabled state |\n| `.fs-navigation-lock` | `modifier` | Indicates locked state; Applied to body element |\n\n"}