formstone/src/docs/navigation.html

Library of modular front end components.

<h4>Basic</h4>
<p>By default, Navigation will only activate itself on screens smaller than 980px. Resize your screen if the menu is not active.</p>

<div class="demo_container">
  <div class="demo_example">
    <h5 class="nav_handle nav_handle_toggle">Menu</h5>
    <nav class="js-navigation" data-navigation-handle=".nav_handle_toggle" data-navigation-options='{}'>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h5 class=&quot;nav_handle&quot;&gt;Menu&lt;/h5&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation();</code></pre>
  </div>
</div>

<h4>No Max</h4>

<!-- START: FIRSTDEMO -->

<style>
  @media screen and (min-width: 980px) {
    .nav_offscreen,
    .nav_handle {
      display: none;
    }
  }

  .nav_handle.fs-navigation-overlay-handle.fs-navigation-enabled,
  .nav_handle.fs-navigation-reveal-handle.fs-navigation-enabled,
  .nav_handle.fs-navigation-push-handle.fs-navigation-enabled {
    clear: both;
    margin-top: 10px;
    margin-bottom: 20px;
  }
</style>

<div class="demo_container">
  <div class="demo_example">
    <h5 class="nav_handle nav_handle_toggle_2">Menu</h5>
    <nav class="js-navigation" data-navigation-handle=".nav_handle_toggle_2" data-navigation-options='{"maxWidth":"10000px"}'>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h5 class=&quot;nav_handle&quot;&gt;Menu&lt;/h5&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  maxWidth: "10000px"
});</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>No Theme</h4>
<div class="demo_container">
  <div class="demo_example">
    <h5 class="nav_handle nav_handle_toggle2">Menu</h5>
    <nav class="js-navigation" data-navigation-handle=".nav_handle_toggle2" data-navigation-options='{"theme":""}'>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;h5 class=&quot;nav_handle&quot;&gt;Menu&lt;/h5&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  theme: ""
});</code></pre>
  </div>
</div>

<h4>Off Canvas - Overlay Left</h4>
<div class="demo_container">
  <div class="demo_example">
    <button type="button" class="button nav_handle nav_handle_overlay_left">Menu</button>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;nav_content&quot;&gt;
&Tab;&lt;button type=&quot;button&quot; class=&quot;nav_handle&quot;&gt;Menu&lt;/button&gt;
&lt;/div&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot; data-navigation-content=&quot;.nav_content&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  type: "overlay",
  gravity: "left",
  maxWidth: "10000px"
});</code></pre>
  </div>
</div>

<h4>Off Canvas - Overlay Right</h4>
<div class="demo_container">
  <div class="demo_example">
    <button type="button" class="button nav_handle nav_handle_overlay_right">Menu</button>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;nav_content&quot;&gt;
&Tab;&lt;button type=&quot;button&quot; class=&quot;nav_handle&quot;&gt;Menu&lt;/button&gt;
&lt;/div&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot; data-navigation-content=&quot;.nav_content&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  type: "overlay",
  gravity: "right",
  maxWidth: "10000px"
});</code></pre>
  </div>
</div>

<h4>Off Canvas - Reveal Left</h4>
<div class="demo_container">
  <div class="demo_example">
    <button type="button" class="button nav_handle nav_handle_reveal_left">Menu</button>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;nav_content&quot;&gt;
&Tab;&lt;button type=&quot;button&quot; class=&quot;nav_handle&quot;&gt;Menu&lt;/button&gt;
&lt;/div&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot; data-navigation-content=&quot;.nav_content&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  type: "reveal",
  gravity: "left",
  maxWidth: "10000px"
});</code></pre>
  </div>
</div>

<h4>Off Canvas - Reveal Right</h4>
<div class="demo_container">
  <div class="demo_example">
    <button type="button" class="button nav_handle nav_handle_reveal_right">Menu</button>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;nav_content&quot;&gt;
&Tab;&lt;button type=&quot;button&quot; class=&quot;nav_handle&quot;&gt;Menu&lt;/button&gt;
&lt;/div&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot; data-navigation-content=&quot;.nav_content&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  type: "reveal",
  gravity: "right",
  maxWidth: "10000px"
});</code></pre>
  </div>
</div>

<h4>Off Canvas - Push Left</h4>
<div class="demo_container">
  <div class="demo_example">
    <button type="button" class="button nav_handle nav_handle_push_left">Menu</button>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;nav_content&quot;&gt;
&Tab;&lt;button type=&quot;button&quot; class=&quot;nav_handle&quot;&gt;Menu&lt;/button&gt;
&lt;/div&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot; data-navigation-content=&quot;.nav_content&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  type: "push",
  gravity: "left",
  maxWidth: "10000px"
});</code></pre>
  </div>
</div>

<h4>Off Canvas - Push Right</h4>
<div class="demo_container">
  <div class="demo_example">
    <button type="button" class="button nav_handle nav_handle_push_right">Menu</button>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class=&quot;nav_content&quot;&gt;
&Tab;&lt;button type=&quot;button&quot; class=&quot;nav_handle&quot;&gt;Menu&lt;/button&gt;
&lt;/div&gt;
&lt;nav class=&quot;navigation&quot; data-navigation-handle=&quot;.nav_handle&quot; data-navigation-content=&quot;.nav_content&quot;&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
&Tab;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    <pre><code class="language-javascript">$(".navigation").navigation({
  type: "push",
  gravity: "right",
  maxWidth: "10000px"
});</code></pre>
  </div>
</div>


<div class="js-navigation_elements">

  <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"}'>
    Overlay Left
  </nav>

  <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"}'>
    Overlay Right
  </nav>

  <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"}'>
    Reveal Left
  </nav>

  <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"}'>
    Reveal Right
  </nav>

  <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"}'>
    Push Left
  </nav>

  <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"}'>
    Push Right
  </nav>
</div>