Using the relatively new :focus-within pseudo-selector, you can make the menu drop down for keyboard users without using any JavaScript.
Excluding the mobile menu, what else needs to be done when a submenu opens or closes?
I am interested in minimizing the amount of JavaScript used here. For example, if the screen-reader-text elements are included in the markup sent from the server then this part shouldn’t be needed.
You said it yourself - Relatively New (Grandma’s and Papa’s won’t be able to use it ❐ ‿ ❑ )
You know you can’t exclude mobile menu, and besides if you read the codes in the js I provided above, you’ll get the brainbox behind it.
Well, I use pretty much lots of Js (for Good Reasons), and my page loads stupidly fast, just depends on how you do things. Good Luck with using CSS, if you are able to get it to work, I’ll be interested in how you do it.
If it’s done right, that’s my experience too. The site that the above JavaScript is used on loads “stupidly fast” — and a look at the site’s “waterfall” shows that it adds precisely zero to the page loading time.
It’s also worth noting that if, as I do, you use object caching on the menu, then JavaScript is a great way of still enabling things to be dynamic because it isn’t caught by the object cache.
That page isn’t mine, just a platform to paste and share code, the navigation.js itself on my page loads in 91ms Screenshot by Lightshot when minified, - perhaps because its plain JS. - To me, I am fine with this solution, Js is made for a reason, and we shouldn’t ignore it.
When using a plugin to generate the same accessible menu, it took 894ms to load check out Screenshot by Lightshot when minified
@timkaye I would love to know how you use object caching, I have no idea, it would be a bonus, and also a great asset to my toolbox (ȏ∀ȏ)
Here is how I customise the default menus in classicpress. It’s easy and works. The focus here is compatibility with Bootstrap and not touching core files, but it does include some ARIA.