<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!--
Tested and working for the following themes:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cerulean/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/darkly/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/flatly/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/journal/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/lumen/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/paper/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/readable/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/sandstone/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/simplex/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/slate/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/spacelab/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css
-->
<!-- Android slide fix: user-scalable=no -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="visible-xs pull-left navbar-brand navbar-toggle navbar-left" data-toggle="offcanvas">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas bg-info" id="sidebar">
<ul id="tree">
<li><a href="#">Dashboard</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Statistics</a></li>
<li><a href="#">Messages</a>
<ul>
<li><a href="#">Reports</a>
<ul>
<li class="active"><a href="#">Report1</a></li>
<li><a href="#">Report2</a></li>
<li><a href="#">Report3</a></li>
</ul>
</li>
<li><a href="#">Employee Maint.</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">All articles</a></li>
<li><a href="#">New article</a></li>
<li><a href="#">Advanced</a>
<ul>
<li><a href="#">Reports</a>
<ul>
<li><a href="#">Report1</a></li>
<li><a href="#">Report2</a></li>
<li><a href="#">Report3</a></li>
</ul>
</li>
<li><a href="#">Trashcan</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Modules</a>
<ul>
<li><a href="#">All modules</a></li>
<li><a href="#">Add module</a></li>
<li><a href="#">Advanced</a>
<ul>
<li><a href="#">Reports</a>
<ul>
<li><a href="#">Report1</a></li>
<li><a href="#">Report2</a></li>
<li><a href="#">Report3</a></li>
</ul>
</li>
<li><a href="#">Trashcan</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8 col-md-9 bg-warning">
<p>
Tender interloper warp driver reef hornswaggle Sail ho square-rigged fire ship bowsprit. Stern splice the main brace nipperkin topsail gangway keel league square-rigged port main sheet. Provost rigging aft execution dock gabion mizzen piracy tack parrel six pounders.
</p>
<p>
Chase hempen halter aye rum cutlass mizzen yardarm loot barkadeer grog. Chain Shot knave ballast Pieces of Eight salmagundi Yellow Jack lugger take a caulk broadside squiffy. Galleon poop deck bilged on her anchor run a shot across the bow snow lateen sail long boat killick hang the jib lass.
</p>
<p>
Sutler barkadeer warp gabion swing the lead booty wench fathom cog lugsail. Jib squiffy measured fer yer chains Corsair yard dead men tell no tales overhaul gunwalls topmast Shiver me timbers. Bilge Pirate Round bilge rat sloop Pieces of Eight long clothes bucko grapple main sheet haul wind.
</p>
<p>
Tender interloper warp driver reef hornswaggle Sail ho square-rigged fire ship bowsprit. Stern splice the main brace nipperkin topsail gangway keel league square-rigged port main sheet. Provost rigging aft execution dock gabion mizzen piracy tack parrel six pounders.
</p>
<p>
Chase hempen halter aye rum cutlass mizzen yardarm loot barkadeer grog. Chain Shot knave ballast Pieces of Eight salmagundi Yellow Jack lugger take a caulk broadside squiffy. Galleon poop deck bilged on her anchor run a shot across the bow snow lateen sail long boat killick hang the jib lass.
</p>
<p>
Sutler barkadeer warp gabion swing the lead booty wench fathom cog lugsail. Jib squiffy measured fer yer chains Corsair yard dead men tell no tales overhaul gunwalls topmast Shiver me timbers. Bilge Pirate Round bilge rat sloop Pieces of Eight long clothes bucko grapple main sheet haul wind.
</p>
<p>
Tender interloper warp driver reef hornswaggle Sail ho square-rigged fire ship bowsprit. Stern splice the main brace nipperkin topsail gangway keel league square-rigged port main sheet. Provost rigging aft execution dock gabion mizzen piracy tack parrel six pounders.
</p>
<p>
Chase hempen halter aye rum cutlass mizzen yardarm loot barkadeer grog. Chain Shot knave ballast Pieces of Eight salmagundi Yellow Jack lugger take a caulk broadside squiffy. Galleon poop deck bilged on her anchor run a shot across the bow snow lateen sail long boat killick hang the jib lass.
</p>
<p>
Sutler barkadeer warp gabion swing the lead booty wench fathom cog lugsail. Jib squiffy measured fer yer chains Corsair yard dead men tell no tales overhaul gunwalls topmast Shiver me timbers. Bilge Pirate Round bilge rat sloop Pieces of Eight long clothes bucko grapple main sheet haul wind.
</p>
</div>
</div>
</div>
/* Extra icon */
.navbar-header button[data-toggle="offcanvas"] {
margin-left: 15px;
font-size: inherit;
line-height: inherit;
height: auto;
padding-top: 9px;
padding-bottom: 9px;
}
.navbar-header button[data-toggle="offcanvas"]:after {
font-family: 'FontAwesome';
content: "\f054";
float: right;
width: 12px;
height: 17px;
margin-top: -3px;
}
.navbar-header button[data-toggle="offcanvas"].opened:after {
content: "\f00d";
}
button[data-toggle="offcanvas"].btn:focus{
outline: 0px;
}
.btn-wrapper {
margin-left: 15px;
margin-top: 13px;
}
.btn-wrapper button {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 15px;
}
/* Custom active effect */
.tree ul>li.active>a,
.tree ul>li.active>a:hover,
.tree ul>li.active>a:focus{
text-decoration: underline;
}
body {
padding-top: 40px; /* Fixed top menu */
overflow-x: hidden; /* Avoid hor scrolling */
}
.row-offcanvas .col-xs-12{
padding-top:32px;
}
/* Off Canvas */
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
.row-offcanvas-left.active .sidebar-offcanvas{
position: fixed;
left: 0;
top: 40px;
max-height: 85%;
overflow-y: auto;
left: -15px;
padding-left: 20px;
}
}
.sidebar-offcanvas {
padding-top: 28px;
background-color: #ffffff;
}
#tree li.branch a:hover, #tree li.branch i {
cursor: pointer;
}
#tree li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 0px;
}
#tree>li {
padding: 0px;
}
.tree, .tree ul {
margin:0;
padding:0;
list-style:none
}
.tree ul {
margin-left:0.4em;
position:relative
}
.tree ul ul {
margin-left:.5em
}
.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid
}
.tree li {
margin:0;
padding:0 1em;
line-height:2em;
color:#369;
font-weight:700;
position:relative
}
.tree ul li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid;
margin-top:-1px;
position:absolute;
top:1em;
left:0;
}
.tree ul li:last-child:before {
background-color: #ffffff;
height:auto;
top:1em;
bottom:0
}
.indicator {
padding-right:5px;
}
.tree li a {
text-decoration: none;
color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
text-decoration: none;
color:#369;
border:none;
background:transparent;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
outline: 0;
}
$.fn.extend({
treed: function (o) {
var openedClass = 'fa-folder-open';
var closedClass = 'fa-folder';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
var classes = openedClass + " " + closedClass;
branch.prepend("<i class='indicator fa " + closedClass + "'></i>");
if(branch.find('li').hasClass('active')){
$(this).toggleFolder(classes); // open folders with active item
}
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
$(this).toggleFolder(classes);
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
},
toggleFolder: function (elem) {
var icon = $(this).children('i:first');
icon.toggleClass(elem);
$(this).children().children().toggle();
}
});
//Initialization of treeview
$('#tree').treed();
//Initialization of off-canvas
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active');
$(this).toggleClass('opened');
$('.navbar-collapse').collapse('hide');
});
$('[data-toggle="collapse"]').click(function () {
if($(this).attr("aria-expanded")=="false"){
//alert('test');
$('.row-offcanvas').removeClass('active');
$('[data-toggle="offcanvas"]').removeClass('opened');
}
});
});
