smdm-slide-menu
Version:
A library agnostic multilevel page menu with a smooth slide effect based on CSS transitions, focused on accessibility.
240 lines (228 loc) • 7.55 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Slide Menu (Integration 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="slide-menu.css" rel="stylesheet" />
<link href="demo.css" 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>Menu controls</h2>
<div>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="toggle"
data-arg="false"
>
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>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="navigateTo"
data-arg="#about-1-2"
>
Jump to About 1.2
</button>
<button
type="button"
class="btn slide-menu__control"
data-target="test-menu-left"
data-action="navigateTo"
data-arg="#special-link-3"
>
Jump to Blog
</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://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"
>
Back
</button>
<div class="slide-menu__title">Menu</div>
<button type="button" class="slide-menu__control slide-menu__close" data-action="close">
Close
</button>
</div>
<ul>
<li>
<a href="#/news" aria-label="Open News">News</a>
<ul>
<li>
<a href="#/news-1-1">News 1.1</a>
</li>
<li>
<a
class="slide-menu__item--has-foldable-submenu"
href="#/news-1-2"
id="news-1-2"
aria-label="Open Submenu News 1.2"
>News 1.2</a
>
<ul>
<li>
<a href="#">News 1.2.1</a>
</li>
<li>
<a href="#" id="special-link-1">News 1.2.2 – special</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><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>
</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.4</a>
</li>
</ul>
</li>
<li>
<a href="#/blog" id="special-link-3">Blog</a>
</li>
<li>
<a href="#/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 – special</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><a href="#">About 1.4.4</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>
<script>
function logEvent(id, event) {
const events = document.getElementById('events');
const li = document.createElement('li');
li.textContent = id + ': ' + Math.round(event.timeStamp) + ' ms — ' + event.type;
events.prepend(li);
}
const config = () => {
const menuElem = document.getElementById('test-menu-left');
const allEvents = [
'sm.init',
'sm.open', 'sm.open-after',
'sm.close', 'sm.close-after',
'sm.back', 'sm.back-after',
'sm.forward', 'sm.forward-after',
'sm.navigate', 'sm.navigate-after',
'sm.navigateTo', 'sm.navigateTo-after',
];
allEvents.forEach((eventName) => {
menuElem.addEventListener(eventName, (event) => logEvent('Menu', event));
});
const menu = new SlideMenu(menuElem, {
position: 'left',
keyClose: 'Escape',
closeOnClickOutside: true,
});
if (window.innerWidth > 767) {
menu.open(false);
}
};
if (window.SlideMenu) {
config();
} else {
window.addEventListener('sm.ready', config);
}
</script>
<script type="text/javascript" src="slide-menu.js"></script>
</body>
</html>