diff options
author | Joe Hutchinson <hutch7995@gmail.com> | 2022-03-04 06:42:35 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-04 06:42:35 +0300 |
commit | d1c9ab6527b00e11e5c4296f52d2d0e1252cec45 (patch) | |
tree | 81c04d5a8fda7adcda153cde8ee64ef51920d747 | |
parent | 7f91b9a73ca2b13b079e5bd39d04bcacbce79f14 (diff) |
* First pass no-js menu
* Make overlay menu work without js
* Fix shifting menu on chrome
* Fix htmlvalidator issue and ARIA misuse
-rw-r--r-- | assets/css/style.css | 35 | ||||
-rw-r--r-- | assets/js/core.js | 14 | ||||
-rw-r--r-- | layouts/partials/nav-bar.html | 7 |
3 files changed, 33 insertions, 23 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 7e0db90..b3a4aa5 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -71,44 +71,53 @@ p { z-index: 105; } .hamburger-menu { - display: block; + display: flex; + align-items: center; position: relative; + width: 33px; + height: 33px; z-index: 105; -webkit-user-select: none; user-select: none; } -.hamburger-menu button { +.hamburger-menu-button { display: block; - position: relative; + position: absolute; width: 33px; height: 33px; - padding: 0px; - border: 0px; - outline: none; - background-color: transparent; z-index: 500; /* and place it over the hamburger */ -webkit-touch-callout: none; cursor: pointer; + opacity: 0; } -.hamburger-menu button span { +.hamburger-menu-icon { + position: relative; + z-index: 499; +} +.hamburger-menu-icon span { display: block; width: 33px; height: 3px; - position: relative; background-color: #454545; border-radius: 3px; transform-origin: center; 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); } -.hamburger-menu button span:first-of-type { +.hamburger-menu-icon span:first-of-type { margin-bottom: 6px; } -.hamburger-menu-open button span { +.hamburger-menu-button:checked { + position: fixed; +} +.hamburger-menu-button:checked + .hamburger-menu-icon { + position: fixed; +} +.hamburger-menu-button:checked + .hamburger-menu-icon span { background-color: white; transform: rotate(45deg) translate(3.2px , 3.2px); } -.hamburger-menu-open button span:last-of-type { +.hamburger-menu-button:checked + .hamburger-menu-icon span:last-of-type { transform: rotate(-45deg) translate(3.2px , -3.2px); } .hamburger-menu-overlay { @@ -129,7 +138,7 @@ p { opacity: 0; transition: visibility 0.2s ease-out, opacity 0.2s ease-out; } -.hamburger-menu-open .hamburger-menu-overlay { +.hamburger-menu-button:checked ~ .hamburger-menu-overlay { visibility: visible; opacity: 0.9; } diff --git a/assets/js/core.js b/assets/js/core.js index 6420831..3879b54 100644 --- a/assets/js/core.js +++ b/assets/js/core.js @@ -7,16 +7,14 @@ function cardReleased() { } function hamburgerMenuPressed() { - if (this.parentNode.classList.contains('hamburger-menu-open')) { - document.body.classList.remove('no-scroll'); - this.parentNode.classList.remove('hamburger-menu-open') - this.setAttribute('aria-expanded', "false"); - document.body.style.paddingRight = 0 + "px"; - } else { + if (this.checked) { + this.setAttribute('aria-expanded', "true"); document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px"; document.body.classList.add('no-scroll'); - this.parentNode.classList.add('hamburger-menu-open') - this.setAttribute('aria-expanded', "true"); + } else { + this.setAttribute('aria-expanded', "false"); + document.body.classList.remove('no-scroll'); + document.body.style.paddingRight = 0 + "px"; } }
\ No newline at end of file diff --git a/layouts/partials/nav-bar.html b/layouts/partials/nav-bar.html index be482dd..804827e 100644 --- a/layouts/partials/nav-bar.html +++ b/layouts/partials/nav-bar.html @@ -7,10 +7,13 @@ {{ end -}} </a></h1> <div class="hamburger-menu"> - <button onclick="hamburgerMenuPressed.call(this)" aria-haspopup="true" aria-expanded="false" aria-controls="menu" aria-label="Menu"> + <input class="hamburger-menu-button" type="checkbox" + onclick="hamburgerMenuPressed.call(this)" + > + <div class="hamburger-menu-icon"> <span></span> <span></span> - </button> + </div> <ul id="menu" class="hamburger-menu-overlay"> <li><a href="{{ .Site.BaseURL }}" class="hamburger-menu-overlay-link">Home</a></li> {{ range where .Site.Pages "Params.displayinmenu" true -}} |