ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the accecibility of the mobil menu. Also switch to SVG hamburger icon that is animated.

Browse source
This commit is contained in:
Fredrik Jonsson 2022-12-21 10:05:10 +01:00
commit 7f91caaf5d
2 changed files with 91 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/js/cookieconsent.js
View file

@ -11,10 +11,7 @@
cookiebanner.classList.add('js-cookieconsent-open');
}
const cookie_buttons = Array.prototype.slice.call(
document.querySelectorAll('button[data-consent]')
);
const cookie_buttons = document.querySelectorAll('button[data-consent]');
cookie_buttons.forEach(function (button) {
button.addEventListener('click', function () {
if (button.getAttribute('data-consent') === 'true') {

41
assets/js/mobile.js
View file

@ -3,19 +3,46 @@
* A JavaScript file for the mobile menu.
*/
(function ($) {
(function () {
'use strict';
const body = document.querySelector('body');
const sheet = document.querySelector('.mobile-nav__sheet');
const toggle = document.querySelector('.mobile-nav__toggle');
function navopen () {
body.classList.add('js-nav-open');
sheet.setAttribute('aria-hidden', 'false');
toggle.setAttribute('aria-expanded', 'true');
}
function navclose () {
body.classList.remove('js-nav-open');
sheet.setAttribute('aria-hidden', 'true');
toggle.setAttribute('aria-expanded', 'false');
}
// Toggle the mobile nav sheet.
$('.mobile-nav__cover, .mobile-nav__toggle').handle('click', function () {
$('body').scroll().toggleClass('js-nav-open');
const toggles = document.querySelectorAll('.mobile-nav__cover, .mobile-nav__toggle');
toggles.forEach(function (toggle) {
toggle.addEventListener('click', function (e) {
e.preventDefault();
if (body.classList.contains('js-nav-open')) {
navclose ();
}
else {
navopen ();
}
});
});
// Close the nav sheet after click (needed for anchor links).
$('.mobile-nav__sheet').find('a').on('click', function () {
$('body').removeClass('js-nav-open');
const links = document.querySelectorAll('.mobile-nav__sheet a');
links.forEach(function (link) {
link.addEventListener('click', function (e) {
navclose ();
});
});
})(u);
})();