Have ideas to improve npm?Join in the discussion! »

    toggle-navigation

    0.1.3 • Public • Published

    Toggle navigation

    Full screen navigation with toggle.

    Install

    bower install trendwerk/toggle-navigation --save

    Usage

    Using toggle-navigation is a two-step process:

    1. SCSS: @include the mixin on your header. The header should contain your main navigation;
    2. JS: Initialize your toggle button.

    Minimal implementation

    @include toggle-navigation((
      'height': 80px, 
      'menu': '.menu-selector', 
    ));
    $('.toggle-selector').toggleNavigation();

    Common implementation

    A more common setup is to include the item and until parameters:

    @include toggle-navigation((
      'height': 80px, 
      'item': '.item-selector', 
      'menu': '.menu-selector', 
      'until': 981px, 
    ));

    API

    @include toggle-navigation((
        'background': null, 
        'bottom-space': 80px, 
        'height': null, 
        'item': null, 
        'menu': null, 
        'speed': 0.4s, 
        'until': null, 
    ));

    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.

    Keywords

    none

    Install

    npm i toggle-navigation

    DownloadsWeekly Downloads

    4

    Version

    0.1.3

    License

    none

    Last publish

    Collaborators

    • avatar