This body
of this document has two children: a main
element followed by a nav
element.
That nav
element has an ID which the menu link at the top of the main
element points to:
<a href="#menu">Menu</a>
So by default, the navigation is available via the “jump to footer” pattern.
If JavaScript is available, and the browser passes the feature detection test (for querySelector
and addEventListener
), then a class of cutsthemustard
is added to the body
. This applies different styling to the main
and nav
elements so that they are all set for the “off-canvas” pattern (both elements are given z-index
values).
An event handler is added to the menu link which toggles a class of active
on the body. The presence or absence of this class is what triggers the ”off-canvas” behaviour by changing the position of the main
element.
So for browsers that “cut the mustard”, the navigation is available via the “off-canvas” pattern.