xxxxxxxxxx1
<body class="fixed-sn">2
3
<!--Main Navigation-->4
<header>5
6
<!--Navbar-->7
<nav class="navbar navbar-expand-lg navbar-dark primary-color double-nav">8
9
<!-- SideNav slide-out button -->10
<div class="float-left">11
<a href="#" data-activates="slide-out" class="button-collapse">12
<i class="fa fa-bars"></i>13
</a>14
</div>15
16
<!-- Breadcrumb-->17
<div class="breadcrumb-dn mr-auto">18
<p>Material Design for Bootstrap</p>19
</div>20
21
<!-- Links -->22
<ul class="nav navbar-nav nav-flex-icons ml-auto">23
<li class="nav-item">24
<a class="nav-link">25
<i class="fa fa-envelope"></i>26
<span class="clearfix d-none d-sm-inline-block">Contact</span>27
</a>28
</li>29
<li class="nav-item">30
<a class="nav-link">31
<i class="fa fa-gear"></i>32
<span class="clearfix d-none d-sm-inline-block">Settings</span>33
</a>34
</li>35
<li class="nav-item dropdown">36
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"37
aria-haspopup="true" aria-expanded="false">38
<i class="fa fa-user"></i>39
<span class="clearfix d-none d-sm-inline-block">Account</span>40
</a>41
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">42
<a class="dropdown-item" href="#">Action</a>43
<a class="dropdown-item" href="#">Another action</a>44
<a class="dropdown-item" href="#">Something else here</a>45
</div>46
</li>47
</ul>48
49
</nav>50
<!--/.Navbar-->51
52
<!-- Sidebar navigation -->53
<div id="slide-out" class="side-nav fixed">54
<ul class="custom-scrollbar">55
<!-- Logo -->56
<li>57
<div class="logo-wrapper waves-light">58
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>59
</div>60
</li>61
<!--/. Logo -->62
<!--Social-->63
<li>64
<ul class="social">65
<li><a href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>66
<li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>67
<li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>68
<li><a href="#" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>69
</ul>70
</li>71
<!--/Social-->72
<!--Search Form-->73
<li>74
<form class="search-form" role="search">75
<div class="form-group md-form mt-0 pt-1 waves-light">76
<input type="text" class="form-control" placeholder="Search">77
</div>78
</form>79
</li>80
<!--/.Search Form-->81
<!-- Side navigation links -->82
<li>83
<ul class="collapsible collapsible-accordion">84
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i>85
Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>86
<div class="collapsible-body">87
<ul>88
<li><a href="#" class="waves-effect">Submit listing</a>89
</li>90
<li><a href="#" class="waves-effect">Registration form</a>91
</li>92
</ul>93
</div>94
</li>95
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i>96
Instruction<i class="fa fa-angle-down rotate-icon"></i></a>97
<div class="collapsible-body">98
<ul>99
<li><a href="#" class="waves-effect">For bloggers</a>100
</li>101
<li><a href="#" class="waves-effect">For authors</a>102
</li>103
</ul>104
</div>105
</li>106
<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>107
<div class="collapsible-body">108
<ul>109
<li><a href="#" class="waves-effect">Introduction</a>110
</li>111
<li><a href="#" class="waves-effect">Monthly meetings</a>112
</li>113
</ul>114
</div>115
</li>116
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact117
me<i class="fa fa-angle-down rotate-icon"></i></a>118
<div class="collapsible-body">119
<ul>120
<li><a href="#" class="waves-effect">FAQ</a>121
</li>122
<li><a href="#" class="waves-effect">Write a message</a>123
</li>124
<li><a href="#" class="waves-effect">FAQ</a>125
</li>126
<li><a href="#" class="waves-effect">Write a message</a>127
</li>128
<li><a href="#" class="waves-effect">FAQ</a>129
</li>130
<li><a href="#" class="waves-effect">Write a message</a>131
</li>132
<li><a href="#" class="waves-effect">FAQ</a>133
</li>134
<li><a href="#" class="waves-effect">Write a message</a>135
</li>136
</ul>137
</div>138
</li>139
</ul>140
</li>141
<!--/. Side navigation links -->142
</ul>143
<div class="sidenav-bg rgba-blue-strong"></div>144
</div>145
<!--/. Sidebar navigation -->146
147
</header>148
<!--Main Navigation-->149
150
<!--Main layout-->151
<main>152
153
</main>154
<!--Main layout-->155
156
<!-- Footer -->157
<footer class="page-footer font-small blue">158
159
<!-- Copyright -->160
<div class="footer-copyright text-center py-3">© 2018 Copyright:161
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>162
</div>163
<!-- Copyright -->164
165
</footer>166
<!-- Footer -->167
168
</body>1
1
xxxxxxxxxx1
2
// SideNav Button Initialization3
$(".button-collapse").sideNav();4
// SideNav Scrollbar Initialization5
var sideNavScrollbar = document.querySelector('.custom-scrollbar');6
Ps.initialize(sideNavScrollbar);7
Console errors: 0