Menu

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.