xxxxxxxxxx1
<header>2
<!-- Sidebar navigation -->3
<div id="slide-out" class="side-nav fixed">4
<ul class="custom-scrollbar">5
<!-- Logo -->6
<li>7
<div class="logo-wrapper waves-light">8
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>9
</div>10
</li>11
<!--/. Logo -->12
<!--Social-->13
<li>14
<ul class="social">15
<li><a href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>16
<li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>17
<li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>18
<li><a href="#" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>19
</ul>20
</li>21
<!--/Social-->22
<!--Search Form-->23
<li>24
<form class="search-form" role="search">25
<div class="form-group md-form mt-0 pt-1 waves-light">26
<input type="text" class="form-control" placeholder="Search">27
</div>28
</form>29
</li>30
<!--/.Search Form-->31
<!-- Side navigation links -->32
<li>33
<ul class="collapsible collapsible-accordion">34
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i35
class="fa fa-angle-down rotate-icon"></i></a>36
<div class="collapsible-body">37
<ul>38
<li><a href="#" class="waves-effect">Submit listing</a>39
</li>40
<li><a href="#" class="waves-effect">Registration form</a>41
</li>42
</ul>43
</div>44
</li>45
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i46
class="fa fa-angle-down rotate-icon"></i></a>47
<div class="collapsible-body">48
<ul>49
<li><a href="#" class="waves-effect">For bloggers</a>50
</li>51
<li><a href="#" class="waves-effect">For authors</a>52
</li>53
</ul>54
</div>55
</li>56
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>57
<div class="collapsible-body">58
<ul>59
<li><a href="#" class="waves-effect">Introduction</a>60
</li>61
<li><a href="#" class="waves-effect">Monthly meetings</a>62
</li>63
</ul>64
</div>65
</li>66
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>67
<div class="collapsible-body">68
<ul>69
<li><a href="#" class="waves-effect">FAQ</a>70
</li>71
<li><a href="#" class="waves-effect">Write a message</a>72
</li>73
<li><a href="#" class="waves-effect">FAQ</a>74
</li>75
<li><a href="#" class="waves-effect">Write a message</a>76
</li>77
<li><a href="#" class="waves-effect">FAQ</a>78
</li>79
<li><a href="#" class="waves-effect">Write a message</a>80
</li>81
<li><a href="#" class="waves-effect">FAQ</a>82
</li>83
<li><a href="#" class="waves-effect">Write a message</a>84
</li>85
</ul>86
</div>87
</li>88
</ul>89
</li>90
<!--/. Side navigation links -->91
</ul>92
<div class="sidenav-bg rgba-blue-strong"></div>93
</div>94
<!--/. Sidebar navigation -->95
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar">96
<div id="openSideBar">97
<a href="#" data-activates="slide-out" class="button-showSide"><i class="fa fa-bars"></i></a>98
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#podNavbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">99
<span class="navbar-toggler-icon"></span>100
</button>101
</div>102
<div id="closeSideBar" style="display: none;">103
<a href="#" class="button-hideSide"><i class="fa fa-bars"></i></a>104
</div>105
</nav>106
</header>107
108
xxxxxxxxxx1
.side-nav {2
margin-top: 48px;3
}xxxxxxxxxx1
// SideNav Button Initialization2
$(".button-showSide").sideNav();3
// SideNav Scrollbar Initialization4
var sideNavScrollbar = document.querySelector('.custom-scrollbar');5
Ps.initialize(sideNavScrollbar);6
7
$('.button-showSide').click( function() {8
$('#openSideBar').hide();9
$('#closeSideBar').show();10
});11
12
$('.button-hideSide').click( function() {13
// Check to make sure the side nav wasn't closed by clicking off the menu14
// If it was clicked off, the #closeSideBar div is still showing15
if ( $('#sidenav-overlay').length ) {16
// It's open and we need to close it17
$('#sidenav-overlay').remove();18
$('#slide-out').attr('style', 'transform: translateX(-100%); transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)');19
$('#closeSideBar').hide();20
$('#openSideBar').show();21
} else {22
// It was most likely clicked off and needs to be re-opened23
$('#openSideBar a').trigger('click');24
}25
}); Console errors: 0