toggle-js
Version:
A simple toggle script for menus, accordions, navigation, and more.
72 lines (56 loc) • 2.69 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Toggle – A simple toggle script for menus, accordions, navigation, and more.</title>
<link rel="stylesheet" href="examples.css">
<style type="text/css">
body {
background: #fff;
line-height: 1.6;
padding: 4rem 0;
}
.headline {
color: #000;
font-size: 5rem;
font-weight: 200;
text-align: center;
}
.lead {
font-size: 1.5rem;
font-weight: 300;
margin: 0 0 2rem;
text-align: center;
}
</style>
</head>
<body>
<header class="container">
<h1 class="headline">Toggle</h1>
<p class="lead">A simple toggle script for menus, accordions, navigation, and more.</p>
</header>
<main class="container">
<h2>What is Toggle?</h2>
<p>Toggle is a lightweight JavaScript module that provides simple toggle interaction functionality using the accessible <code><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded">aria-expanded</a></code> HTML attribute. Toggle is pure JavaScript with no dependencies, and can be easily implemented into any workflow or framework.</p>
<h2>Getting Started</h2>
<p>See <a href="https://github.com/oldrivercreative/toggle">the GitHub repo</a> for installation and configuration instructions.</p>
<hr>
<h2>Toggle Recipes</h2>
<p>Toggle is deceptively simple. With a bit of configuration and a dash of CSS, it can be used for context menus, accordions, tabs, modals, mobile navigation menus, and more. Some of the most common Toggle patterns, or <em>recipes</em>, are shown below. Note that some recipes use the <a href="http://fontawesome.io/">Font Awesome icon font</a>. We'll start out basic and move into more complex patterns as we go.</p>
<ul>
<li><a href="recipe-toggle-panel.html">Toggle Panel</a></li>
<li><a href="recipe-context-menu.html">Context Menu</a></li>
<li><a href="recipe-accordion-menu.html">Accordion Menu</a></li>
<li><a href="recipe-accordion-menu-buttons.html">Accordion Menu Buttons</a></li>
<li><a href="recipe-dropdown-menu.html">Dropdown Menu</a></li>
<li><a href="recipe-off-canvas-menu.html">Off-Canvas Menu</a></li>
<li><a href="recipe-accordion.html">Accordion</a></li>
<li><a href="recipe-tabs.html">Tabs</a></li>
</ul>
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>