"Bootstrap 3 Admin Control Panel for Mobile/Desktop (TreeView)"
Bootstrap 3.3.0 Snippet by inge1980

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$.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();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit
BS4 Login, Register FORM + Mobile
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel

Questions / Comments: