formstone
Version:
Library of modular front end components.
297 lines (272 loc) • 14.2 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Navigation · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="navigation-demo">Navigation Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/navigation">View Documentation</a></p>
<!-- START: DEMO -->
<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"><h5 class="nav_handle">Menu</h5>
<nav class="navigation" data-navigation-handle=".nav_handle">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><h5 class="nav_handle">Menu</h5>
<nav class="navigation" data-navigation-handle=".nav_handle">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><h5 class="nav_handle">Menu</h5>
<nav class="navigation" data-navigation-handle=".nav_handle">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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"><div class="nav_content">
	<button type="button" class="nav_handle">Menu</button>
</div>
<nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav></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>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>