mmenu, when opened, is preventing the ability to use the rest of the page as usual, specifically relating to tabbing between form elements and allowing you to press a key on an input element or textarea and have the key repeat (i.e. aaaaaaaaaaaaaaa).
Apparently this is something that is built into mmenu but it's a real problem since we are using it in an always open state for desktops and need this functionality.
I do not want to modify any behavior of media elements with a max-width of 899px (mobile devices), only the desktop (min-width 900px), which is the first portion of the script beginning with if (mql.matches).
My current "fire the mmenu" script is:
<script>
function mediaqueryresponse(x) {
if (mql.matches)
{
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#navmenu", {
"openingInterval": 0,
"transitionDuration": 0,
wrappers: ["bootstrap"],
"extensions": [
"position-front",
"fx-panels-none",
"theme-dark"
],
"offCanvas":
{
"blockUI": false,
"moveBackground": true
},
"sidebar":
{
"expanded":
{
"use": true
}
},
"navbar":
{
"title": "INTRANET"
},
"navbars": [
{
"position": "top",
"content": [
"prev",
"title"
],
},
{
"position": "bottom",
"content": [
"<a class='fa fa-envelope' href='mailto:webmaster@example.com'></a>",
"<a class='fa fa-twitter' href='https://www.twitter.com/example'></a>",
"<a class='fa fa-facebook' href='fb://profile/6515649878645135'></a>"
]
}
]
});
}
);
}
else
{
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#navmenu", {
wrappers: ["bootstrap"],
"extensions": [
"position-front",
"pagedim-black",
"theme-dark"
],
"navbar":
{
"title": "INTRANET"
},
"navbars": [
{
"position": "top",
"content": [
"prev",
"title"
],
},
{
"position": "bottom",
"content": [
"<a class='fa fa-envelope' href='mailto:webmaster@example.com'></a>",
"<a class='fa fa-twitter' href='https://www.twitter.com/example'></a>",
"<a class='fa fa-facebook' href='fb://profile/6515649878645135'></a>"
]
}
]
});
}
);
}
}
var mql = window.matchMedia("screen and (min-width: 900px) and (orientation:landscape)")
mediaqueryresponse(mql) // call listener function explicitly at run time
mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes
</script>This seems to have solved it for me:
After your menu code, which will look somewhat like this:
new Mmenu(document.querySelector("#menu"), {
[...]
}
you add:
document.body.removeEventListener('keydown', document.body.mmEventKeydownTabguard[0])
This is the solution posted here: