Navigation

Menus Updated

IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, check this page for the old navigational structure. This page will be available until all templates have been upated using the latest verison of the Framework.

Timber provides a solid structure for creating CSS3 driven menus with support for simple and complex sub-menus. Menu items are by default floated left but can easily be centered or right aligned by applying the classes .nav-center and .nav-right to the navigation wrapper.

Example - Left Aligned
Example
Example - Centered
Example
Example - Right Aligned
Example

Note: We can add sub menu indication arrows by adding the class .sub-menu-indicator to the navigation wrapper and .contains-sub-menu or .contains-mega-sub-menu to the parent li tags.

Example

Mega Menus

Example

Timber provides a simple system for handling desktop and mobile navigation. By default both primary (dekstop) and secondary (desktop & mobile) navigations are shown on desktop. On mobile only the secondary navigation is shown. Resize your browser window to see this in action in the sample menu below.

Example

Auxiliary Navigation Updated

We can a launch an auxiliary navigation (side or overlay navigation) using a hamburger menu link called .navigation-show. The auxiliary navigation can be used in addition to the main navigation on desktop or as the main mobile navigation. For this reason we add it to the secondary navigation.

By default the hamburger menu link is hidden on desktop and only shown on screen widths below 768px. On mobile the hamburger menu link is always shown. To show it at all times simply remove the class .hide fromt the .aux-navigation wrapper.

Example
Launching Side Navigation

To make the hamburger menu link open the side navigation, add the class .side-nav-show to the .navigation-show link.

Example
Launching Overlay Navigation

To make the hamburger menu link open the overlay navigation, add the class .overlay-nav-show to the .navigation-show link.

Example

Side Navigation Attributes

The new and improved side navigation comes with a few attributes to control scrollbar appearance and animation.

Position

The side navigation can enter from the left or right of the screen. Force it to enter left by adding the .enter-left, or from the right by adding the .enter-right class to the .side-navgation wrapper.

Scrollbar

The side navigation is given a fixed position by default, which means that if the user scrolls the page, the side navigation will always be visibile, if open. If content overflows the side navigation wrapper, a scrollbar will be visible by default. We can, however, hide the scrollbar, but still allow scrolling on desktop and mobile. To hide the scrollbar add the data-no-scrollbar attribute to the .side-navigation wrapper.

Animation

Control the manner in which the side navigation is revealed by adding the data-animation attribute to the .side-navigation wrapper, and specify one of the following animation types:

  • "slide-in", side navigation slides in over content

  • "push-in", side navigation slides in and content slides out simultaneously

  • "reveal", content slides out to reveal side navigation

  • "scale-in", content slides out and side navigation scales in

Example

Overlay Navigation Attributes

The overlay navigation has also been improved and like the side navigation comes with a few attributes to control scrollbar appearance and animation.

Position

The overlay navigation can enter from the top, right, bottom or left of the screen by applying on of the following classes: .enter-top, .enter-right, .enter-bottom, .enter-left. These are added to the .overlay-navgation wrapper.

Scrollbar

As with the side navigation we can hide the scrollbar, but still allow scrolling on desktop and mobile. To hide the scrollbar add the data-no-scrollbar attribute to the .overlay-navigation wrapper.

Animation

Control the manner in which the overlay navigation is revealed by adding the data-animation attribute to the .overlay-navigation wrapper, and specify one of the following animation types:

  • "scale-in", side navigation scales in

  • "slide-in", side navigation slides in from top, right, bottom or left depending on position

Example
Theme Mountain

Current Version