Toggle navigation
Full screen navigation with toggle.
Install
bower install trendwerk/toggle-navigation --save
Usage
Using toggle-navigation
is a two-step process:
- SCSS:
@include
the mixin on your header. The header should contain your main navigation; - JS: Initialize your toggle button.
Minimal implementation
;
;
Common implementation
A more common setup is to include the item
and until
parameters:
;
API
;
Background
Background for the full screen navigation when opened.
Bottom space
The spacing below the main navigation.
Height (required)
The height of the header when the main navigation is closed. This is necessary to properly animate the opening of the header.
Item
The CSS selector of the items in the main navigation. Setting this option animates the menu items in sequence.
Menu (required)
The CSS selector for the main navigation.
Speed
Animation speed.
Until
A breakpoint (in pixels) until which the full screen navigation should be used.