Right now, our main navigation works both with JavaScript enabled and disabled which is good. We do this by relying on the no-js and js classes as style hooks, which get added by the base script here in the <head>.
We also use a feature detect in the menu JS, which adds a fallback CSS class for older browsers that do run JS, but don't support all the features the menu requires.
Between both of these pieces of JS executing however, there is potentially a lot that could happen. A script that's in the same bundle as the menu JS could throw an error for example, halting execution before the menu gets initialized. In such a scenario, the nav could end up in a broken or semi-functional state.
I'd like to try and improve this by changing the menu not to rely on the no-js and js classes. Instead, we could have a default class to indicate basic functionality, such as mzp-c-menu mzp-is-basic. We could then swap this out for something like mzp-c-menu mzp-is-enhanced once the menu JS executes. Doing this would make the menu much more resilient to any potential errors that may happen during the course of a page load, since it would no longer rely on an entirely unrelated script.
Visually, I don't think there should be any noticeable difference here when doing it this way, since the menu only shows on hover in either scenario, and on smaller viewports it is hidden behind the hamburger menu.
Right now, our main navigation works both with JavaScript enabled and disabled which is good. We do this by relying on the
no-jsandjsclasses as style hooks, which get added by the base script here in the<head>.We also use a feature detect in the menu JS, which adds a fallback CSS class for older browsers that do run JS, but don't support all the features the menu requires.
Between both of these pieces of JS executing however, there is potentially a lot that could happen. A script that's in the same bundle as the menu JS could throw an error for example, halting execution before the menu gets initialized. In such a scenario, the nav could end up in a broken or semi-functional state.
I'd like to try and improve this by changing the menu not to rely on the
no-jsandjsclasses. Instead, we could have a default class to indicate basic functionality, such asmzp-c-menu mzp-is-basic. We could then swap this out for something likemzp-c-menu mzp-is-enhancedonce the menu JS executes. Doing this would make the menu much more resilient to any potential errors that may happen during the course of a page load, since it would no longer rely on an entirely unrelated script.Visually, I don't think there should be any noticeable difference here when doing it this way, since the menu only shows on hover in either scenario, and on smaller viewports it is hidden behind the hamburger menu.