Skip to content

Commit e56d101

Browse files
gasparnagygasparnagy
committed
Add responsive menu JS
1 parent f55c1cb commit e56d101

File tree

3 files changed

+76
-15
lines changed

3 files changed

+76
-15
lines changed

‎_includes/footer-script.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const navContainerId = "navigation-container";
2+
const navContainerBaseClass = "wp-block-navigation__responsive-container";
3+
4+
function isResponsiveMenuOpen(){
5+
var navContainer = document.getElementById(navContainerId);
6+
return navContainer.className != navContainerBaseClass;
7+
}
8+
9+
// shows the menu when the hamburger icon is clicked
10+
function showMenu() {
11+
var navContainer = document.getElementById(navContainerId);
12+
navContainer.className = navContainerBaseClass + " has-modal-open is-menu-open";
13+
14+
document.querySelector(".menu-control").focus();
15+
}
16+
17+
// hides the menu on the (x) button or on focus lost
18+
function hideMenu() {
19+
var navContainer = document.getElementById(navContainerId);
20+
navContainer.className = navContainerBaseClass;
21+
}
22+
23+
// hides the menu when the focus is out of the menu controls
24+
function hideWhenFocusOut(e){
25+
if (isResponsiveMenuOpen() &&
26+
(e.relatedTarget === null ||
27+
(!e.relatedTarget.classList.contains("menu-control") && e.relatedTarget.id != navContainerId))){
28+
hideMenu();
29+
}
30+
}
31+
32+
// handles key events on responsive menu container: keep focus on container controls, handle "Esc"
33+
function menuContainerKeyDown(e){
34+
if (e.target === null || !isResponsiveMenuOpen())
35+
return;
36+
var isEscPressed = (e.key === "Escape" || e.keyCode === 27);
37+
if (isEscPressed)
38+
{
39+
e.preventDefault();
40+
hideMenu();
41+
return;
42+
}
43+
var isTabPressed = (e.key === "Tab" || e.keyCode === 9);
44+
if (isTabPressed){
45+
var controls = document.querySelectorAll(".menu-control");
46+
if (!e.shiftKey && e.target == controls[controls.length - 1]){
47+
controls[0].focus();
48+
e.preventDefault();
49+
return;
50+
}
51+
if (e.shiftKey && e.target == controls[0]){
52+
controls[controls.length - 1].focus();
53+
e.preventDefault();
54+
return;
55+
}
56+
}
57+
}

‎_includes/header.html‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,27 @@
2020
<button aria-haspopup="dialog" aria-label="Open menu"
2121
class="wp-block-navigation__responsive-container-open "
2222
data-wp-on-async--click="actions.openMenuOnClick"
23-
data-wp-on--keydown="actions.handleMenuKeydown"><svg width="24" height="24"
23+
data-wp-on--keydown="actions.handleMenuKeydown"
24+
onclick="showMenu()"><svg width="24" height="24"
2425
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"
2526
focusable="false">
2627
<rect x="4" y="7.5" width="16" height="1.5"></rect>
2728
<rect x="4" y="15" width="16" height="1.5"></rect>
2829
</svg>
2930
</button>
30-
<div class="wp-block-navigation__responsive-container" id="modal-1"
31+
<div class="wp-block-navigation__responsive-container" id="navigation-container"
3132
data-wp-class--has-modal-open="state.isMenuOpen"
3233
data-wp-class--is-menu-open="state.isMenuOpen" data-wp-watch="callbacks.initMenu"
3334
data-wp-on--keydown="actions.handleMenuKeydown"
34-
data-wp-on-async--focusout="actions.handleMenuFocusout" tabindex="-1">
35+
data-wp-on-async--focusout="actions.handleMenuFocusout" tabindex="-1" onfocusout="hideWhenFocusOut(event)" onkeydown="menuContainerKeyDown(event)">
3536
<div class="wp-block-navigation__responsive-close" tabindex="-1">
3637
<div class="wp-block-navigation__responsive-dialog"
3738
data-wp-bind--aria-modal="state.ariaModal"
3839
data-wp-bind--aria-label="state.ariaLabel"
3940
data-wp-bind--role="state.roleAttribute">
40-
<button aria-label="Close menu"
41-
class="wp-block-navigation__responsive-container-close"
42-
data-wp-on-async--click="actions.closeMenuOnClick"><svg
41+
<button aria-label="Close menu" id="navigation-container-close"
42+
class="menu-control wp-block-navigation__responsive-container-close"
43+
data-wp-on-async--click="actions.closeMenuOnClick" onclick="hideMenu()"><svg
4344
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
4445
height="24" aria-hidden="true" focusable="false">
4546
<path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z">
@@ -50,26 +51,26 @@
5051
<ul
5152
class="wp-block-navigation__container is-responsive items-justified-center wp-block-navigation">
5253
<li class=" wp-block-navigation-item current-menu-item wp-block-navigation-link">
53-
<a class="wp-block-navigation-item__content"
54+
<a class="menu-control wp-block-navigation-item__content"
5455
href="{{ site.url }}" aria-current="page"><span
5556
class="wp-block-navigation-item__label">Home</span></a>
5657
</li>
5758
<li class=" wp-block-navigation-item wp-block-navigation-link"><a
58-
class="wp-block-navigation-item__content"
59+
class="menu-control wp-block-navigation-item__content"
5960
href="https://go.reqnroll.net/quickstart" target="_blank"><span
6061
class="wp-block-navigation-item__label">Quickstart</span></a>
6162
</li>
6263
<li class=" wp-block-navigation-item wp-block-navigation-link"><a
63-
class="wp-block-navigation-item__content"
64+
class="menu-control wp-block-navigation-item__content"
6465
href="https://docs.reqnroll.net/" target="_blank"><span
6566
class="wp-block-navigation-item__label">Documentation</span></a>
6667
</li>
6768
<li class=" wp-block-navigation-item wp-block-navigation-link"><a
68-
class="wp-block-navigation-item__content"
69+
class="menu-control wp-block-navigation-item__content"
6970
href="{{ site.url }}/news/"><span
7071
class="wp-block-navigation-item__label">News</span></a></li>
7172
<li class=" wp-block-navigation-item wp-block-navigation-link"><a
72-
class="wp-block-navigation-item__content"
73+
class="menu-control wp-block-navigation-item__content"
7374
href="{{ site.url }}/support/"><span
7475
class="wp-block-navigation-item__label">Support</span></a>
7576
</li>
@@ -81,7 +82,7 @@
8182
data-wp-on-async--mouseleave="actions.closeMenuOnHover"
8283
data-wp-watch="callbacks.initMenu" tabindex="-1"
8384
class=" wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu">
84-
<a class="wp-block-navigation-item__content">About</a><button
85+
<a class="menu-control wp-block-navigation-item__content">About</a><button
8586
data-wp-bind--aria-expanded="state.isMenuOpen"
8687
data-wp-on-async--click="actions.toggleMenuOnClick"
8788
aria-label="About submenu"
@@ -95,18 +96,18 @@
9596
<ul data-wp-on-async--focus="actions.openMenuOnFocus"
9697
class="wp-block-navigation__submenu-container wp-block-navigation-submenu">
9798
<li class=" wp-block-navigation-item wp-block-navigation-link">
98-
<a class="wp-block-navigation-item__content"
99+
<a class="menu-control wp-block-navigation-item__content"
99100
href="{{ site.url }}/about/"><span
100101
class="wp-block-navigation-item__label">About
101102
Reqnroll</span></a>
102103
</li>
103104
<li class=" wp-block-navigation-item wp-block-navigation-link">
104-
<a class="wp-block-navigation-item__content"
105+
<a class="menu-control wp-block-navigation-item__content"
105106
href="{{ site.url }}/sponsorship/"><span
106107
class="wp-block-navigation-item__label">Sponsorship</span></a>
107108
</li>
108109
<li class=" wp-block-navigation-item wp-block-navigation-link">
109-
<a class="wp-block-navigation-item__content"
110+
<a class="menu-control wp-block-navigation-item__content"
110111
href="{{ site.url }}/contact/"><span
111112
class="wp-block-navigation-item__label">Contact</span></a>
112113
</li>

‎_layouts/base.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111

1212
{%- include footer.html -%}
1313

14+
<script>
15+
{%- include footer-script.js -%}
16+
</script>
1417
</body>
1518

1619
</html>

0 commit comments

Comments
 (0)