Sidenav

A jQuery plugin that creates a slideout navigation on the right or left, for the sidebar css component see Sidebar.

Syntax with Options:

<head>
    <script src="side-navigation.js"></script>
</head>

<body>
    <div class="sidenav-container" id="mySidenavContainerId">
        <a class="btn btn-default sidenav-toggler" href="#mySidenavContainerId">
            <span aria-hidden="true" class="glyphicon glyphicon-align-justify"></span> Toggle
        </a>

        <div class="sidenav-menu-slider">
            <div class="sidenav-menu">
                ... Your Side Nav Content ...
            </div>
        </div>

        <div class="sidenav-content">
            ... Your Main Content ...
        </div>
    </div>

    <script>
        $('.sidenav-toggler').sideNavigation({
            breakpoint: 768, // The window width that defines the desktop size. Default: 768.
            container: null, // The class or ID of the container. Default: null.
            content: '.sidenav-content', // The class or ID of the content. Default: '.sidenav-content'.
            equalHeight: true, // The height of content and navigation should be equal.
            gutter: '15px', // The space between the sidenav-slider and the sidenav-content. Default: 15px.
            loadingIndicatorTPL: '<div class="loading-animation loading-animation-md"></div>', // Loading indicator template
            navigation: '.sidenav-menu-slider', // The class or ID of the slider. Default: '.sidenav-menu-slider'.
            position: 'left', // The position of the sidenav-slider. Possible values: left, right. Default: 'left'.
            type: 'relative', // The type of sidenav in desktop. Possible values: relative, fixed, fixed-push. Default: 'relative'.
            typeMobile: 'relative', // The type of sidenav in mobile. Possible values: relative, fixed, fixed-push. Default: 'relative'.
            url: null, // The URL or $.ajax config object to fetch the content to inject into .sidebar-body. Default: null.
            useDelegate: true, // The type of reference to use on the toggler event handler. Value false, directly binds click to the toggler.
            width: '225px' // The width of the side navigation. Default: '225px'.
        });
    </script>
</body>

To create a sidenav relative to other elements inside your page, you must follow the markup structure shown above and pass the sidenav-container element to the plugin with the href attribute or the data-target attribute on the toggler. The container option also allows you to pass the container via javascript if href or data-target can't be used. The options above are optional.

Avoid the flash of unstyled content when using the Javascript api by adding the class sidenav-js-fouc to the sidenav-container.

... Your Main Content ...

<button class="btn btn-default sidenav-toggler" data-target="#mySidenavContainerId">
    Sidenav Toggler
</button>

<div class="sidenav-container" id="mySidenavContainerId">
    <div class="sidenav-menu-slider">
        <div class="sidenav-menu">
            <div class="col-md-12">... Your Side Nav Content ...</div>
        </div>
    </div>

    <div class="sidenav-content">
        <div class="col-md-12">... Your Main Content ...</div>
    </div>
</div>

<script>
    $('.sidenav-toggler').sideNavigation();
</script>

... Your Main Content ...

<button class="btn btn-default sidenav-toggler1">
    Sidenav Toggler 1
</button>

<div class="sidenav-container" id="mySidenavContainerId1">
    <div class="sidenav-menu-slider">
        <div class="sidenav-menu">
            <div class="col-md-12">... Your Side Nav Content ...</div>
        </div>
    </div>

    <div class="sidenav-content">
        <div class="col-md-12">... Your Main Content ...</div>
    </div>
</div>

<script>
    $('.sidenav-toggler1').sideNavigation({
        container: '#mySidenavContainerId1',
        position: 'right'
    });
</script>

The Side Navigation data api was added for situations where there is limited control over the markup structure. The only markup needed is a toggler and a panel to hide and show. These items can be included anywhere on the page.

The minimum amount of attributes required is data-toggle="sidenav" and href="#target" or data-target="#target". This will open and close a fixed position sidenav provided the markup below. The width of the sidenav-slider, sidenav-menu, and position of the sidenav must be set through css. When using fixed-push, padding must also be set via css on open to push the content over.

The data api allows for fixed-push style sidenavs with the attributes data-content, data-type, and data-type-mobile. Data-content is the id of the content to be pushed over when the nav is open. Data-type and data-type-mobile give the option to specify the style of sidenav in desktop and mobile, respectively. The values can be fixed or fixed-push and defaults to fixed.

The open class name can be customized through the attribute data-open-class and will be added to toggler and content on open.

<head>
    <script src="side-navigation.js"></script>
</head>

<div id="#wrapper">
    <a class="btn btn-default" data-content="body" data-toggle="sidenav" data-type="fixed-push" href="#simpleSidenav2">Simple Sidenav 2 Toggler</a>

    <div class="closed sidenav-fixed sidenav-menu-slider" id="simpleSidenav2">
        <div class="sidebar sidebar-default sidenav-menu">
            ...
        </div>
    </div>
</div>

You can load content into the sidebar of the Side Navigation in one of two ways. At the very minimum, the only two things you need are a URL and that the sidebar has a child element with the sidebar-body class. Data fetched from the URL will be appended to the sidebar-body element.

Using the Data API

Use attribute data-url on the toggle to load content into .sidenav-body when the side navigation is opened.

Simple Sidenav 3 Toggler

Using the Options API

When configuring your sidenav, you can specify the url using either a string or a configuration object that will be passed to $.ajax (though make sure the config object contains the url property).

<div class="sidenav-container">
    <a class="btn btn-default sidenav-toggler" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-align-justify"></span> Toggle
    </a>

    <div class="sidenav-menu-slider">
        <div class="sidenav-menu">
            <div class="sidebar-body">
                Dynamic Content will be appended here...
            </div>
        </div>
    </div>

    <div class="sidenav-content">
        <div class="col-md-12">... Your Main Content ...</div>
    </div>
</div>

<script>
    $('.sidenav-toggler').sideNavigation({
        ...
        // url can be either a string
        url: '/foo.html',

        // or it can be an ajax config object
        url: {
            url: '/foo.html',
            type: 'POST',
            success: function(response) {
                // runs before the content is appended
            },
            // ...etc...
        },
        ...
    });
</script>

Lazy Loading Events and State

When using the url or data-url options, the plugin will fire an event when the content is loaded urlLoaded.lexicon.sidenav.

Also, while the content is being loaded, an element .sidebar-loading containing a loading animation will be added to the .sidebar-body element. The .sidebar-loading element will be removed when the content is done loading.

The loading animation defaults to dotted spinner but can be customized through loadingIndicatorTPL in the options API or data-loading-indicator-tpl in the data API.

If using the options API, the class will be added to the .sidenav-menu element.

Events

openStart.lexicon.sidenav

Fires when the side navigation begins to open.

open.lexicon.sidenav

Fires when the side navigation is fully opened.

closedStart.lexicon.sidenav

Fires when the side navigation begins to close.

closed.lexicon.sidenav

Fires when the side navigation is fully closed.

// Listen directly on the side navigation element

$(SIDENAV).on('closed.lexicon.sidenav', function(event) {
    var sidenav = $(event.target);
    var toggler = event.toggler;
});

// Listen for it on the document (will not work with event.stopPropagation())

$(document).on('closed.lexicon.sidenav', function(event) {
    var sidenav = $(event.target);
    var toggler = event.toggler;
});

Methods

`.sideNavigation('toggle')`

Manually toggles the sidenav. Be aware that this method will return to the caller before the sidenav has been shown or hidden.

$('#myTogglerId').sideNavigation('toggle')

`.sideNavigation('show')`

Manually shows the sidenav. Be aware that this method will return to the caller before the sidenav has been shown.

$('#myTogglerId').sideNavigation('show')

`.sideNavigation('hide')`

Manually toggles the sidenav. Be aware that this method will return to the caller before the sidenav has been hidden.

$('#myTogglerId').sideNavigation('hide')

`.sideNavigation('destroy')`

Destroys the Side Navigation instance for the items in the jQuery collection, and removes any attached event handlers and any associated data added by the plugin.

$('#myTogglerId').sideNavigation('destroy')

`.sideNavigation('instance')`

Returns the Side Navigation instance for the first item in the jQuery collection (similar to how any other jQuery getter method works). If the plugin hasn't been initialized, it will return null.

$('#myTogglerId').sideNavigation('instance')

`.sideNavigation('visible')`

Returns the visible state of the sidenav.

If the sidenav is in the middle of transitioning, this will report what the visible state will be after the transition is finished. This allows you to call it in any state and accurately get the state of the sidenav.

$('#myTogglerId').sideNavigation('show').sideNavigation('visible'); // returns true

$('#myTogglerId').sideNavigation('hide').sideNavigation('visible'); // returns false

Lexicon v1.0.32