https://xssecure.com/js/opne-menu-left-side.js

1$(document).ready(function () {
2
3
4    //stick in the fixed 100% height behind the navbar but don't wrap it
5    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
6  
7    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));  
8
9    // Enter your ids or classes
10    var toggler = '.navbar-toggle';
11    var pagewrapper = '#page-content';
12    var navigationwrapper = '.navbar-header';
13    var menuwidth = '100%'; // the menu inside the slide menu itself
14    var slidewidth = '80%';
15    var menuneg = '-100%';
16    var slideneg = '-80%';
17
18
19    $("#slide-nav").on("click", toggler, function (e) {
20
21        var selected = $(this).hasClass('slide-active');
22
23        $('#navbar-collapse-1').stop().animate({
24            left: selected ? menuneg : '0px'
25        });
26
27        $('#navbar-height-col').stop().animate({
28            left: selected ? slideneg : '0px'
29        });
30
31        $(pagewrapper).stop().animate({
32            left: selected ? '0px' : slidewidth
33        });
34
35        $(navigationwrapper).stop().animate({
36            left: selected ? '0px' : slidewidth
37        });
38
39
40        $(this).toggleClass('slide-active', !selected);
41        $('#navbar-collapse-1').toggleClass('slide-active');
42
43
44        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');
45
46
47    });
48
49
50    var selected = '#navbar-collapse-1, #page-content, body, .navbar, .navbar-header';
51
52
53    $(window).on("resize", function () {
54
55        if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
56            $(selected).removeClass('slide-active');
57        }
58
59
60    });
61
62
63
64
65});