@r00t80y/primary-navigation
Version:
An overlay Menu with a collection of effects and styles using CSS transitions.
91 lines (83 loc) • 6.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>It's not a bug - it's an undocumented feature.</title>
<style>
/* Demo Style */
body {
background: #f1f1f1;
}
*:focus-visible {
outline: 2px solid rgba(255, 0, 0, 0.6);
outline-offset: -2px;
}
</style>
<link rel="icon" href="/favicon.ico"><link href="/primary-navigation.css" rel="stylesheet"></head><body>
<!-- Start: Primary Navigation(Left) -->
<div id="navigation" class="navigation">
<input type="checkbox" id="navigation__state-control" name="navigation__state-control" class="navigation__state-control" checked="false" style="display:none">
<!-- Sometimes the browser caches the state of the checkbox -->
<script>document.getElementById('navigation__state-control').checked = false;</script>
<!-- Burger Icon -->
<label class="navigation__button navigation__button--burger" role="button" aria-controls="navigation__panel" aria-expanded="false" aria-label="Open menu" for="navigation__state-control" tabindex="0">
<span></span>
</label>
<nav id="navigation__panel" class="navigation__panel navigation__panel--left" data-visible="hidden">
<div class="navigation__panel-top">
<!-- Close Icon -->
<label class="navigation__button navigation__button--close" role="button" aria-controls="navigation__panel" aria-expanded="false" aria-label="Close menu" for="navigation__state-control" tabindex="0">
<span></span>
</label>
</div>
<!-- Menu -->
<ul class="navigation__list">
<li class="navigation__item"><a href="/" class="navigation__link">Link 1</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 2</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 3</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 4</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 5</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 6</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 7</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 8</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 9</a></li>
</ul>
</nav>
</div>
<!-- End: Primary Navigation(Left) -->
<!-- Start: Primary Navigation(Right) -->
<div class="navigation">
<input type="checkbox" id="navigation__state-control-1" name="navigation__state-control-1" class="navigation__state-control" checked="false" style="display:none">
<!-- Sometimes the browser caches the state of the checkbox -->
<script>document.getElementById('navigation__state-control-1').checked = false;</script>
<!-- Burger Icon -->
<label class="navigation__button navigation__button--burger" for="navigation__state-control-1" tabindex="0">
<span></span>
</label>
<nav class="navigation__panel navigation__panel--right">
<div class="navigation__panel-top">
<!-- Close Icon -->
<label class="navigation__button navigation__button--close" for="navigation__state-control-1" tabindex="0">
<span></span>
</label>
</div>
<!-- Menu -->
<ul class="navigation__list">
<li class="navigation__item"><a href="/" class="navigation__link">Link 11</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 12</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 13</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 14</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 15</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 16</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 17</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 18</a></li>
<li class="navigation__item"><a href="/" class="navigation__link">Link 19</a></li>
</ul>
</nav>
</div>
<!-- End: Primary Navigation(Right) -->
<!-- Demo content -->
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione ipsa animi deleniti in labore corrupti vel est quia, pariatur placeat quam mollitia illum laborum magnam unde consequuntur natus quasi impedit! Exercitationem distinctio, deleniti autem deserunt quidem at laudantium dolore ducimus itaque dicta, omnis praesentium sint vel, adipisci molestiae reprehenderit amet neque iure. Doloremque harum odit sapiente esse temporibus praesentium nemo iste quam dolorum laboriosam. Perferendis, accusantium fugit illo explicabo beatae sunt expedita, alias eaque aut voluptatum, animi ex! Accusamus vero ullam labore. Soluta temporibus voluptates alias totam, exercitationem quaerat eveniet iste delectus quibusdam iusto quam aut, laboriosam ullam possimus autem nihil sequi natus voluptatibus dolorum veritatis aperiam? Tenetur in facilis corrupti, assumenda architecto inventore modi eum pariatur eaque sunt vel obcaecati sed odio fugit. Deleniti provident autem voluptates beatae cupiditate? Doloremque qui dolor odio ex minima necessitatibus illo quisquam animi, quasi provident doloribus velit, laborum aspernatur rerum repellendus eos voluptates nihil obcaecati voluptatem ad non ipsum. Iusto provident fugit, eaque necessitatibus minus repellat voluptates aliquid aliquam nisi quibusdam beatae? Libero officia, perspiciatis rem tenetur quidem similique aperiam vero unde est voluptatibus incidunt nisi neque fugit voluptatem dolorem reprehenderit pariatur ad maxime blanditiis maiores modi. Fugit esse vitae laborum et beatae.</p>
<script defer src="/PrimaryNavigation.lib.js"></script><script defer src="/index.js"></script></body></html>