For Tablet and Desktop
Facet is placed in a Foundation Pillar using a Sticky Grummage to fix its position
For Mobile
For mobile widths, Facet automatically shifts itself into Off Canvas mode.
No Visibility stacks are used and no content is replicated. You simply add the Facet Off Canvas child with a click of the plus button and that is it - Facet takes care of it
Narrow your browser to see Facet transform to an OffCanvas menu.
In this case we are using a vertical toggle launcher. You can also use the menu bar option or an external launcher
Styling
You will notice that we can apply colors and gradients to the Facet menu.
These can be set to show always, just when the content is on the page or (like here) just when the Facet Menu is active.
In this case we have a blue gradient when the Facet Off Canvas is active which is continued on to the toggle launcher.
The Menu Items
The accordion menu in the Facet stack is a SideNav Pro with menu mode enabled.
SideNav Pro also has the option to define separate colors for all its elements when in an active Facet menu.
This is important if the content is against a light background when on the page and a dark background when in the Facet menu