This is Facet

SideBar Columns

Facet is placed in a Foundation 2 Column stack using a Sticky Grummage to fix its position

Multiple Menus

TopBar is set to just display Top Level Items whilst the SideNav Plus in Facet is set to display only Pages that contain SubPages

For Mobile, we hide TopBar and Facet takes over, in this case using a Facet Smooth Entry menu.

Facet also has independently controlled visibility drop zones. So for mobile only we can enable the top zone which contains a SideNav Pro set only to display top level menu items. This therefore replaces the functionality of the hidden topbar and adds to the main Facet content that contains the pages with sub pages only.

SideNavPro also has an option to remove Pages that contain dropdowns from TopBar so that they are not replicated in your menus.

For Tablet and Desktop

For Mobile

For mobile widths, Facet automatically shifts itself into a Smooth Entry menu mode.

Smooth Entry is a full height slide down or slide up menu,

No Visibility stacks are used and no content is replicated. You simply add the Facet Smooth Entry 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 a Smooth Entry menu.

In this case we have menu bar launcher set with a gradient to match TopBar. Notice that the Facet menu bar has all the options you would expect (and a lot more) to keep a consistent look with your desktop TopBar

Styling

All Facet Menu toggles and bars have a huge variety of styling options to achieve the look that you want.

Remember the examples on these pages are just ideas. The point of Facet is that is is a totally modular and flexible system, allowing you to build the menu that you want.

My Image

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