Bootply

Bootstrap Editor use requires a larger screen resolution. Resize your browser, or use a device with a larger screen (desktop or laptop). You can preview at smaller widths (phone / tablet), but the editing capability is disabled.

Switch to render view

javascript

$.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');
    }
  });
});

css

/* 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;
}

html

container

row

8.3%

12.5%

25%

33%

41.6%

50%

58.3%

66%

75%

83.3%

91.6%

100%

Hero

well

<form>

h1

h2

h3

h4

small

icon

table

<hr>

label

badge

[media]

"Lorem ipsum.."

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.

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.

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.

Bootstrap 3 Admin Control Panel for Mobile/De Bootstrap 3 collapsible horisontal navbar and off-canvas vertical tree menu. Optimized for mobile and desktop.
0	1761 Bootstrap v3.3.6 Related snippets Forked from dyphd2BVY6
treeview dashboard admin tree layout offcanvas collapse sidebar fontawesome jquery responsive menu submenu fluid
Created by: turbopipp

Bootply

Bootstrap 3 Admin Control Panel for Mobile/De

Bootstrap 3 collapsible horisontal navbar and off-canvas vertical tree menu. Optimized for mobile and desktop.

Bootply v1.2.1
An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

id
style
class

Bootply

Bootstrap 3 Admin Control Panel for Mobile/De

Bootstrap 3 collapsible horisontal navbar and off-canvas vertical tree menu. Optimized for mobile and desktop.

Bootply v1.2.1 An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

Starter Template

Details

Do you want to proceed?

Password Lookup

Would you like to upgrade?

$9/mo

Contact Us

Bootply v1.2.1
An unofficial Bootstrap playground.