Nuns Practicing Misanthropy
    Wondering what’s next for npm?Check out our public roadmap! »

    side-navigation

    1.0.4 • Public • Published

    side-navigation

    A light-weight side navigation implementation in ES6

    Installation

    npm install side-navigation

    Usage

    import sideNavigation from 'side-navigation';
    
    new sideNavigation({ options });
    

    Options

    navigation: querySelector for the main navigation container

    toggleButton: querySelector for the menu toggle button

    position: (optional :: string) is either 'left' or 'right' and describes from where the navigation slides in, default: 'left'

    closed: (optional :: boolean) describes if the navigation is open or closed during initialisation

    Example

    new sideNavigation({
        navigation: 'nav#menu',
        toggleButton: '#toggle',
        position: 'right',
        closed: true
    })
    

    Styling

    Styling is absolutely up to you and your creative freedom. However, side-navigation merely adds a single class to your sidenav when you close it which requires the following:

    #menu.navigation-closed{
        transform: translateX(-102%);
    }
    

    Therefore your normal style should contain something along the lines:

    #menu {
        transform: translateX(0);
    }
    

    Contributing

    Ideas and discussion is highly appreciated. Simply open up an issue or PR.

    Install

    npm i side-navigation

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    ISC

    Last publish

    Collaborators

    • avatar