smdm-slide-menu
Version:
A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions, focused on accessibility.
566 lines (556 loc) • 18.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SMDM - Slide Menu Demo</title>
<meta
name="description"
content="A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions"
/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="shortcut icon" href="./favicon.png" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet" />
<link href="./styles/demo.scss" rel="stylesheet" />
</head>
<body>
<main role="main">
<h1>Slide Menu</h1>
<p>
A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions.
Ships with friendly keyboard navigation and optional foldable submenus.
<a href="https://github.com/studiomitte/slide-menu">Read the documentation here.</a>
</p>
<h2>Multi-purpose menu (left)</h2>
<div>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="toggle"
data-cypress="toggle-menu"
data-arg="false"
>
Toggle menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="open"
data-cypress="open-menu"
>
Open menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="close"
data-cypress="close-menu"
>
Close menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="navigateTo"
data-arg="#about-1-2"
data-cypress="jump-to-about-1-2"
>
Jump to specific submenu (About)
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="navigateTo"
data-arg="#special-link-3"
data-cypress="jump-to-special-link-3"
>
Jump to specific link (Blog)
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="navigateTo"
data-arg="#special-link-777"
data-cypress="jump-to-special-link-777"
>
Jump to specific link in first fold level (News)
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="open"
>
Dynamic open target
</button>
</div>
<footer>
Made with
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon">
<path
d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"
></path>
</svg>
by <a href="https://studiomitte.com">@studiomitte</a>
</footer>
</main>
<div class="slide-menu__overlay"></div>
<nav class="slide-menu" id="test-menu-left">
<div class="slide-menu__controls">
<button
type="button"
class="slide-menu__control slide-menu__back slide-menu--invisible-on-root-level"
data-action="back"
data-arg="close-fold"
data-cypress="back-close-fold"
>
Back
</button>
<a href="#" class="slide-menu__title">Title</a>
<button type="button" class="slide-menu__control slide-menu__close" data-action="close">
Close
</button>
</div>
<div class="slide-menu--additional-content">
<img
src="https://studiomitte.com/build/images/logo/logo.svg"
width="55"
height="55"
alt="Studiomitte Logo"
/>
</div>
<ul>
<li>
<a href="#/news" aria-label="Open News" data-cypress="jump-to-news">News</a>
<button class="slide-menu__navigator">Sooooomeeewhere</button>
<ul>
<li>
<a
href="#"
class="slide-menu__item slide-menu__control"
data-action="back"
data-arg="close-fold"
data-cypress="back-manually-inserted-backlink"
>Manually inserted Backlink</a
>
</li>
<li>
<a href="#/news-1-1"><span>News 1.1</span></a>
</li>
<li>
<a
class="slide-menu__item--has-foldable-submenu"
href="#/news-1-2"
id="news-1-2"
data-cypress="jump-to-news-1-2"
aria-label="Open Submenu News 1.2"
><span>News 1.2</span></a
>
<ul>
<li>
<div class="slide-menu--additional-content">
<img src="https://studiomitte.com/build/images/logo/logo.svg" alt="" />
<div>Some text here</div>
</div>
</li>
<li>
<a href="http://google.de">News 1.2.1</a>
</li>
<li>
<a id="special-link-777" href="#">News 1.2.2</a>
</li>
<li>
<a
class="slide-menu__item--has-foldable-submenu"
href="#"
id="news-1-2-3"
aria-label="Open Submenu News 1.2.3"
>News 1.2.3</a
>
<ul>
<li>
<div class="slide-menu--additional-content">
<img src="https://studiomitte.com/build/images/logo/logo.svg" alt="" />
<div>Some other text here</div>
</div>
</li>
<li>
<a href="#">News 1.2.3.1</a>
</li>
<li>
<a href="#">News 1.2.3.2</a>
</li>
<li>
<a href="#">News 1.2.3.3</a>
</li>
<li>
<a href="#">News 1.2.3.4</a>
</li>
<li>
<a href="#">News 1.2.3.5</a>
</li>
<li>
<a
href="#"
data-action="close"
data-target="test-menu-left"
tabindex="0"
class="slide-menu__control"
>Close</a
>
</li>
</ul>
</li>
<li>
<a
class="slide-menu__item--has-foldable-submenu"
href="#"
aria-label="Open Submenu News 1.2.3"
>News 1.2.4</a
>
<ul>
<li>
<div class="slide-menu--additional-content">
<img src="https://studiomitte.com/build/images/logo/logo.svg" alt="" />
<div>Some other text here</div>
</div>
</li>
<li>
<a href="#">News 1.2.4.1</a>
</li>
<li>
<a href="#">News 1.2.4.2</a>
</li>
<li>
<a href="#">News 1.2.4.3</a>
</li>
<li>
<a href="#">News 1.2.4.4</a>
</li>
<li>
<a href="#">News 1.2.4.5</a>
</li>
<li>
<a
href="#"
data-action="close"
data-target="test-menu-left"
tabindex="0"
class="slide-menu__control"
>Close</a
>
</li>
</ul>
</li>
<li>
<a
href="#"
data-action="close"
data-target="test-menu-left"
tabindex="0"
class="slide-menu__control"
>Close</a
>
</li>
</ul>
</li>
<li>
<a href="#" id="special-link-1">News 1.3 - I am Special 1</a>
</li>
<li>
<a href="#">News 1.4</a>
</li>
<li>
<a
class="slide-menu__item--has-foldable-submenu"
href="#/news-1-5"
aria-label="Open Submenu News 1.5"
><span>News 1.5</span></a
>
<ul>
<li>
<div class="slide-menu--additional-content">
<img src="https://studiomitte.com/build/images/logo/logo.svg" alt="" />
<div>Some text here</div>
</div>
</li>
<li>
<a href="http://google.de">News 1.5.1</a>
</li>
<li>
<a href="#">News 1.5.2</a>
</li>
<li>
<a href="#">News 1.5.2</a>
</li>
<li>
<a
class="slide-menu__item--has-foldable-submenu"
href="#"
aria-label="Open Submenu News 1.2.3"
>News 1.5.3</a
>
<ul>
<li>
<div class="slide-menu--additional-content">
<img src="https://studiomitte.com/build/images/logo/logo.svg" alt="" />
<div>Some other text here</div>
</div>
</li>
<li>
<a href="#">News 1.5.3.1</a>
</li>
<li>
<a href="#">News 1.5.3.2</a>
</li>
<li>
<a href="#">News 1.5.3.3</a>
</li>
<li>
<a href="#">News 1.5.3.4</a>
</li>
<li>
<a href="#">News 1.5.3.5</a>
</li>
<li>
<a
href="#"
data-action="close"
data-target="test-menu-left"
tabindex="0"
class="slide-menu__control"
>Close</a
>
</li>
</ul>
</li>
<li>
<a
class="slide-menu__item--has-foldable-submenu"
href="#"
aria-label="Open Submenu News 1.2.3"
>News 1.2.4</a
>
<ul>
<li>
<div class="slide-menu--additional-content">
<img src="https://studiomitte.com/build/images/logo/logo.svg" alt="" />
<div>Some other text here</div>
</div>
</li>
<li>
<a href="#">News 1.2.4.1</a>
</li>
<li>
<a href="#">News 1.2.4.2</a>
</li>
<li>
<a href="#">News 1.2.4.3</a>
</li>
<li>
<a href="#">News 1.2.4.4</a>
</li>
<li>
<a href="#">News 1.2.4.5</a>
</li>
<li>
<a
href="#"
data-action="close"
data-target="test-menu-left"
tabindex="0"
class="slide-menu__control"
>Close</a
>
</li>
</ul>
</li>
<li>
<a
href="#"
data-action="close"
data-target="test-menu-left"
tabindex="0"
class="slide-menu__control"
>Close</a
>
</li>
</ul>
</li>
<li><a href="#" data-action="close" class="slide-menu__control">Close</a></li>
</ul>
</li>
<li>
<a href="#/blog" id="special-link-3">Blog</a>
</li>
<li>
<a href="#/about" aria-label="Open Submenu About" aria-label="Open Submenu About"
>About</a
>
<ul>
<li>
<a href="#/">About 1.1</a>
</li>
<li>
<a href="#" aria-label="Open Submenu About 1.2" id="about-1-2">About 1.2</a>
<ul>
<li>
<a href="#" id="special-link-2">About 1.2.1 - I am Special 2</a>
</li>
<li>
<a href="#">About 1.2.2</a>
</li>
<li>
<a href="#">About 1.2.3</a>
</li>
<li>
<a href="#">About 1.2.4</a>
</li>
<li>
<a href="#">About 1.2.5</a>
</li>
</ul>
</li>
<li>
<a href="#">About 1.3</a>
</li>
<li>
<a class="slide-menu__item--has-foldable-submenu" href="#">About 1.4</a>
<ul>
<li>
<a href="#">About 1.4.1</a>
</li>
<li>
<a href="#">About 1.4.2</a>
</li>
<li>
<a href="#">About 1.4.3</a>
</li>
<li id="special-link-4">
<a id="special-link-888" href="#">About 1.4.4 - I'm special (5)!</a>
</li>
<li>
<a href="#">About 1.4.5</a>
</li>
</ul>
</li>
<li>
<a href="#">About 1.5</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- <nav class="slide-menu" id="test-menu-right">
<div class="controls">
<button type="button" class="btn slide-menu__control" data-action="back">Back</button>
<button type="button" class="btn slide-menu__control" data-action="close">Close</button>
</div>
<img src="https://studiomitte.com/build/images/logo/logo.svg" width="35" height="35"
alt="Studiomitte Logo">
<ul>
<li>
<a href="http://google.de">News</a>
<ul>
<li>
<a href="#"><span>News 1.1</span></a>
</li>
<li>
<a class="slide-menu__item--has-foldable-submenu" href="http://google.de"><span>News 1.2</span></a>
<ul>
<li>
<a href="http://google.de">News 1.2.1</a>
</li>
<li>
<a href="#" id="special-link-1">News 1.2.2 – I'm special (1)!</a>
</li>
<li>
<a href="#">News 1.2.2</a>
</li>
<li>
<a class="slide-menu__item--has-foldable-submenu" href="#">News 1.2.3</a>
<ul>
<li>
<a href="#">News 1.2.3.1</a>
</li>
<li>
<a href="#">News 1.2.3.2</a>
</li>
<li>
<a href="#">News 1.2.3.3</a>
</li>
<li id="special-link-2">
<a href="#">News 1.2.3.4 - I'm special (2)!</a>
</li>
<li>
<a href="#">News 1.2.3.5</a>
</li>
</ul>
</li>
<li>
<a href="#">News 1.2.4</a>
</li>
</ul>
</li>
<li>
<a href="#">News 1.3</a>
</li>
<li>
<a href="#">News 1.3</a>
</li>
<li>
<a href="#">News 1.4</a>
</li>
</ul>
</li>
<li>
<a href="#" id="special-link-3">Blog</a>
</li>
<li>
<a href="#">About</a>
<ul>
<li>
<a href="#">About 1.1</a>
</li>
<li>
<a href="#">About 1.2</a>
<ul>
<li>
<a href="#">About 1.2.1</a>
</li>
<li>
<a href="#">About 1.2.2</a>
</li>
<li>
<a href="#">About 1.2.3</a>
</li>
<li>
<a href="#">About 1.2.4</a>
</li>
<li>
<a href="#">About 1.2.5</a>
</li>
</ul>
</li>
<li>
<a href="#">About 1.3</a>
</li>
<li>
<a href="#">About 1.4</a>
</li>
<li>
<a href="#">About 1.5</a>
</li>
</ul>
</li>
</ul>
</nav> -->
<script src="./demo/dev-demo.js"></script>
<script type="module" src="./lib/SlideMenu.min.ts"></script>
</body>
</html>