jQuery SlideNav

A jQuery navigation slider that is easily configurable.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="container">

        <div class="topbar">
            <a href="#slidenav1" data-slidenav-menu="right" class="right">Toggle right</a>
            <a href="#slidenav1" data-slidenav-menu="left"  class="left">Toggle left</a>
        </div>

        <div class="slidenav" id="slidenav1">
            <div class="slidenav-wrap">
                <h4>Slide nav content</h4>

               
    
                <div class="slidenav-menu-left">
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a>
                            <ul>
                                <li><a href="#">Link 3.1</a></li>
                                <li><a href="#">Link 3.2</a>
                                    <ul>
                                        <li><a href="#">Link 3.2.1</a></li>
                                        <li><a href="#">Link 3.2.2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
    
                <div class="slidenav-menu-right">
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a>
                            <ul>
                                <li><a href="#">Link 3.1</a></li>
                                <li><a href="#">Link 3.2</a>
                                    <ul>
                                        <li><a href="#">Link 3.2.1</a></li>
                                        <li><a href="#">Link 3.2.2</a></li>
                                    </ul>
                                </li>
                            </ul>
       ...

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body { padding: 20px; font-family: sans-serif; font-size: 100%; line-height: 1.25; }
a { text-decoration: none; }

a.is-active { background-color: #eee; }

.container { margin: 0 0 15px; padding: 0; border: 1px solid #333; }

.clear:before, .clear:after { content: " "; display: table; }
.clear:after { clear: both; }
.left { float: left; }
.right { float: right; }

.slidenav { overflow-x: hidden; }
.slidenav-wrap { 
    position: relative; 
    padding-top: 1px; 
    left: 0;
}

[class^="slidenav-menu-"], [class*=" slidenav-menu-"] {
    position: absolute; top: 0; right: -250px; bottom: 0; z-index: 100;
    overflow-x: hidden;
    width: 250px;
    background-color: #eee;
}
[class^="slidenav-menu-"]:before,   [class^="slidenav-menu-"]:after,
[class*=" slidenav-menu-"]:before,  [class*=" slidenav-menu-"]:after {
    content: " "; display: table;
}
[class^="slidenav-menu-"]:after, [class*=" slidenav-menu-"]:after {
    clear: both
}

.slidenav-menu-right    { right: -250px; }
.slidenav-menu-left     { left: -250px; }

.slidenav-tierwrap { position: absolute; top: 0; left: 0; width: 250px; }
.slidenav-tier { float: left; width: 250px; }

.slidenav-tierlink { background-color: #E5E5E5; }
.slidenav-tier > .slidenav-tierlink { background-color: #d5d5d5; }

.slidenav-menu-right ul ul, 
.slidenav-menu-left ul ul { display: none; }

.slidenav-menu-right ul, 
.slidenav-menu-left ul { 
    list-style-type: none; 
    margin: 0;
    padding: 0;
}

.slidenav-menu-right ul li, 
.slidenav-menu-left ul li,
.slidenav-tier > a { 
    border-bottom: 1px solid #ccc;
}

.slidenav-menu-right ul a, 
.slidenav-menu-left ul a,
.slidenav-tier > a,
.slidenav-back { 
    display: block;
    padding: 7px 15px;
}


.topbar {
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.topbar:before, .topbar:after { content: " "; display: table; }
.topbar:after { clear: both; }

JavaScript

/* CSS3 transition polyfill 
   =========================================== */

$.fn._transition = function (styles, duration, callback) {
    var $element = this;

    // Get properties that need to transition

    var properties = [];
    for (var prop in styles) {
        properties.push(prop);
    }
    var transitionProps = properties.join(', ');

    // Use css transitions if supported
    // otherwise use jQuery

    if (Modernizr.csstransitions) {

        var transitionStyles = {
            'transition-property': transitionProps, // eg. 'width, left, color'
            'transition-duration': duration + 'ms',
            'transition-timing-function': 'ease'
        };
        $element.css($.extend({}, styles, transitionStyles));

        setTimeout(function () {
            $element.css({ 'transition': 'none' }); // reset transition
            if (callback) { callback(); }
        }, duration);
    }
    else {
        $element.animate(styles, duration, callback);
    }
};


/*
 * SlideNav
 * A jQuery navigation slider that is easily configurable
 * Version: "1.0.0"
 * Florian Bar (http://www.flobar.co.za/)
 * License: MIT
 */

(function ($, window, undefined) {

    var pluginName = "slidenav";

    /* The constructor 
       =========================================== */

    $[pluginName] = function (element, options) {
        var self = this;
        var options = $.extend({}, $[pluginName].defaults, options);

        var $slidenav = $(element);
        var elementId = '#' + $(element).attr('id');
        var $wrap = $('.slidenav-wrap', $slidenav);

        var $rightTriggers = $('a[href="' + elementId + '"][data-slidenav-menu="right"]');
        var $leftTriggers = $('a[href="' + elementId + '"][data-slidenav-menu="left"]');

        init();

        /* User events
           =========================================== */

        $('body').on('click.' + pluginName, 'a[href="' + elementId + '"]', function (e) {
                var direction =...