Null Pointer Micromanagement

    @curiousmedia/responsive-nav

    1.1.1 • Public • Published

    Responsive Nav

    Responsive navigation for desktop and mobile devices. On larger devices, menu is expanded and fully visible. On smaller devices, menu is collapsed and can be toggled open and closed.

    Usage

    See /demo folder for a working demo.

    HTML structure

    The .scroll wrapper is unnecessary if menu scrolling is disabled.

    <nav>
        <div class="scroll">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
            <a href="#" class="close">Close</a>
        </div>
    </nav>
     
    <a href="#" class="toggle">Menu toggle</a>
    <script src="responsive-nav.js"></script>

    Javascript

    The ResponsiveNav class accepts two arguments: a DOM element containing the menu (required) and a config object (optional).

    //Config
    var config = {
        scrollElement: document.querySelector('nav .scroll')
     }
    
    //Responsive Nav class
    var menu = new ResponsiveNav(document.querySelector('nav'), config);
    //Menu toggle
    document.querySelector('.toggle').addEventListener('click', () => {
        menu.toggle()
    });
    //Close menu
    document.querySelector('.close').addEventListener('click', () => {
        menu.close();
    });

    CSS

    @import 'responsive-nav';
    .toggle, .close {
        display: none;
    }
     
    nav {
        @include responsive-nav-expanded();
        @include responsive-nav-condensed();
        @media only screen and (max-width: 640px) {
            @at-root .toggle {
                display: block;
            }
            
            .close {
                display: block;
            }
        }
    }

    Options

    collapseQuery

    Query used to determine if collapsed or expanded menu will be used.

    Default: only screen and (min-width: 640px)

    disableDocumentScroll

    When menu is opened in collapsed mode, the website body will not be scrollable.

    Default: true

    scrollElement

    If a DOM element is passed, the collapsed menu will be scrollable as necessary. disableDocumentScroll and scrollElement may be used together.

    Default: false

    scroll

    Responsive nav uses IScroll library to handle scrolling in collapsed menu. IScroll configuration can be customized by defining this object. See IScroll documentation for configuration details.

    Default: {bounce: true, mouseWheel: true, scrollX: false, scrollY: true, click: true, disablePointer: true, disableTouch: false, disableMouse: false}

    Keywords

    none

    Install

    npm i @curiousmedia/responsive-nav

    DownloadsWeekly Downloads

    2

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    329 kB

    Total Files

    13

    Last publish

    Collaborators

    • ishoa
    • cm-gregory
    • kyfoote
    • curiousjason
    • eaglstun