smdm-slide-menu
Version:
A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions, focused on accessibility.
299 lines (283 loc) • 9.14 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Slide Menu (Demo)</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet" />
<meta name="charset" content="utf-8"><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="slide-menu.css" rel="stylesheet"><link href="demo.css" rel="stylesheet"></head>
<body>
<main role="main">
<h1>
Slide Menu
<small>v1.2.3</small>
</h1>
<p>A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions.</p>
<p>
<a href="https://github.com/grubersjoe/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"
>
Toggle menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="open"
>
Open menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="close"
>
Close menu
</button>
</div>
<h2>Navigation menu (right)</h2>
<div>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-right"
data-action="toggle"
>
Toggle menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-right"
data-action="open"
>
Open menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-right"
data-action="close"
>
Close menu
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-right"
data-action="back"
>
Navigate back
</button>
<br />
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-right"
data-action="navigateTo"
data-arg="#special-link-1"
>
Jump to specific link (1)
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-right"
data-action="navigateTo"
data-arg="#special-link-2"
>
Jump to specific link (2)
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-right"
data-action="navigateTo"
data-arg="#special-link-3"
>
Jump to specific link (Blog)
</button>
<br />
<button
type="button"
class="btn btn-danger slide-menu__control"
data-target="test-menu-right"
data-action="destroy"
>
Destroy the right menu
</button>
</div>
<h2>Events</h2>
<ul id="events"></ul>
<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://grubersjoe.de">@grubersjoe</a>
</footer>
</main>
<nav class="slide-menu" id="test-menu-left">
<div class="controls">
<button type="button" class="btn slide-menu__control" data-action="close">Close</button>
</div>
<p>
<em>Slide Menu</em> can also be used for other content different from traditional menus.
</p>
</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>
<ul>
<li>
<a href="http://google.de">News</a>
<ul>
<li>
<a href="#">News 1.1</a>
</li>
<li>
<a href="http://google.de">News 1.2</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 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>
function logEvent(id, event) {
const events = document.getElementById('events');
const li = document.createElement('li');
const time = parseInt(event.timeStamp);
// html-webpack-plugin does not work with ES6 template strings =/
li.appendChild(document.createTextNode(id + ': ' + time + ' - ' + event.type));
events.appendChild(li);
}
document.addEventListener('DOMContentLoaded', function() {
const menuLeftElem = document.getElementById('test-menu-left');
const menuRightElem = document.getElementById('test-menu-right');
const allEvents = [
'sm.back',
'sm.back-after',
'sm.close',
'sm.close-after',
'sm.forward',
'sm.forward-after',
'sm.navigate',
'sm.navigate-after',
'sm.open',
'sm.open-after',
];
allEvents.forEach(eventName => {
menuLeftElem.addEventListener(eventName, event => logEvent('Menu left', event));
menuRightElem.addEventListener(eventName, event => logEvent('Menu right', event));
});
const menuLeft = new SlideMenu(menuLeftElem, {
position: 'left',
submenuLinkAfter: ' ⮞',
backLinkBefore: '⮜ ',
});
const menuRight = new SlideMenu(menuRightElem, {
keyClose: 'Escape',
submenuLinkAfter: '<span style="margin-left: 1em; font-size: 85%;">⮞</span>',
backLinkBefore: '<span style="margin-right: 1em; font-size: 85%;">⮜</span>',
});
if (window.innerWidth > 767) {
menuRight.open(false);
}
});
</script>
<script type="text/javascript" src="slide-menu.js"></script><script type="text/javascript" src="demo.js"></script></body>
</html>