heimoshuiyu/aether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make menu more accessible

Browse Source
This commit is contained in:
Joe Hutchinson
2019-01-03 10:40:57 -05:00
parent ce2d266fc2
commit 26e4dbfa7a
3 changed files with 39 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
layouts/partials/nav-bar.html
View File

@@ -7,17 +7,18 @@
{{ end }} {{ end }}
</a></h1> </a></h1>
<div class="hamburger-menu"> <div class="hamburger-menu">
<input type="checkbox" onclick="hamburgerMenuPressed()"/> <button onclick="hamburgerMenuPressed.call(this)" aria-haspopup="true" aria-expanded="false" aria-controls="menu" aria-label="Menu">
<span></span> <span></span>
<span></span> <span></span>
<ul class="hamburger-menu-overlay"> </button>
<ul id="menu" class="hamburger-menu-overlay">
<li><a href="/" class="hamburger-menu-overlay-link">Home</a></li> <li><a href="/" class="hamburger-menu-overlay-link">Home</a></li>
{{ range where .Site.Pages "Params.displayinmenu" true }} {{ range where .Site.Pages "Params.displayinmenu" true }}
<li><a href="{{ .Permalink }}" class="hamburger-menu-overlay-link">{{ .Title }}</a></li> <li><a href="{{ .Permalink }}" class="hamburger-menu-overlay-link">{{ .Title }}</a></li>
{{ end }} {{ end }}
{{ range $key, $value := .Site.Taxonomies.categories }} {{ range $key, $value := .Site.Taxonomies.categories }}
<li><a href="/categories/{{ $key | urlize }}" class="hamburger-menu-overlay-link">{{ $key | humanize }}</a></li> <li><a href="/categories/{{ $key | urlize }}" class="hamburger-menu-overlay-link">{{ $key | humanize }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
</nav> </nav>

50
static/css/style.css
View File

@@ -43,37 +43,37 @@ strong {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.hamburger-menu input { .hamburger-menu button {
display: block; display: block;
width: 33px; position: relative;
height: 33px; width: 33px;
position: absolute; height: 33px;
top: -9px; padding: 0px;
cursor: pointer; border: 0px;
opacity: 0; /* hide this */ outline: none;
z-index: 500; /* and place it over the hamburger */ background-color: transparent;
-webkit-touch-callout: none; z-index: 500; /* and place it over the hamburger */
-webkit-touch-callout: none;
} }
.hamburger-menu span { .hamburger-menu button span {
display: block; display: block;
width: 33px; width: 33px;
height: 4px; height: 4px;
position: relative; position: relative;
background-color: #3A3B3C; background-color: #3A3B3C;
border-radius: 3px; border-radius: 3px;
z-index: 105; transform-origin: center;
transform-origin: center; transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0),
transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), background-color 0.3s cubic-bezier(0.77,0.2,0.05,1.0);
background-color 0.3s cubic-bezier(0.77,0.2,0.05,1.0);
} }
.hamburger-menu span:first-of-type { .hamburger-menu button span:first-of-type {
margin-bottom: 5px; margin-bottom: 5px;
} }
.hamburger-menu input:checked ~ span { .hamburger-menu-open button span {
background-color: white; background-color: white;
transform: rotate(45deg) translate(3.2px , 3.2px); transform: rotate(45deg) translate(3.2px , 3.2px);
} }
.hamburger-menu input:checked ~ span:nth-last-child(2) { .hamburger-menu-open button span:last-of-type {
transform: rotate(-45deg) translate(3.2px , -3.2px); transform: rotate(-45deg) translate(3.2px , -3.2px);
} }
.hamburger-menu-overlay { .hamburger-menu-overlay {
@@ -94,7 +94,7 @@ strong {
opacity: 0; opacity: 0;
transition: visibility 0.2s ease-out, opacity 0.2s ease-out; transition: visibility 0.2s ease-out, opacity 0.2s ease-out;
} }
input:checked ~ .hamburger-menu-overlay { .hamburger-menu-open .hamburger-menu-overlay {
visibility: visible; visibility: visible;
opacity: 0.9; opacity: 0.9;
} }

6
static/js/core.js
View File

@@ -9,12 +9,16 @@ function cardReleased() {
} }
function hamburgerMenuPressed() { function hamburgerMenuPressed() {
if (document.body.classList.contains('no-scroll')) { if (this.parentNode.classList.contains('hamburger-menu-open')) {
document.body.classList.remove('no-scroll'); document.body.classList.remove('no-scroll');
this.parentNode.classList.remove('hamburger-menu-open')
this.setAttribute('aria-expanded', "false");
document.body.style.paddingRight = 0 + "px"; document.body.style.paddingRight = 0 + "px";
} else { } else {
document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px"; document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
document.body.classList.add('no-scroll'); document.body.classList.add('no-scroll');
this.parentNode.classList.add('hamburger-menu-open')
this.setAttribute('aria-expanded', "true");
} }
} }