Membuat Navbar Bertingkat Dengan Boostrap

Banyak jenis dan model navbar dari boostrap, salah satunya navbar bertingkat, komponen ini ada icon tanda panah jika tanda panah di klik maka akan bia buka dan tutup tergantung kondisi navbar,

Stap scripnya adalah.

1. Download dahulu komponen boostrap bisa di download https://getbootstrap.com/docs/3.3/getting-started/
2. Masukan script HTML seperti dibawah ini

<div class="container">
<div class="panel panel-default">
    <div class="panel-heading">codinkphp.blogspot.co.id</div>
    <div class="panel-body">
        <!-- TREEVIEW CODE -->
        <ul class="treeview">
            <li><a href="#">Index</a>
             <ul>
           <li><a href="#">Menu1</a></li>
           <li><a href="#">Menu2</a>
            <ul>
             <li><a href="#">Submenu1</a></li>
             <li><a href="#">Submenu2</a></li>
             <li><a href="#">Submenu3</a>
              <ul>
           <li><a href="#">Twig</a></li>
           <li><a href="#">Twig</a></li>
           <li><a href="#">Twig</a></li>
           <li><a href="#">Twig</a>
        <ul>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
        </ul>
           </li>
           <li><a href="#">Twig</a></li>
           <li><a href="#">Twig</a></li>
              </ul>
             </li>
             <li><a href="#">Stick</a></li>
            </ul>
           </li>
           <li><a href="#">Branch</a></li>
           <li><a href="#">Branch</a></li>
          </ul>
         </li>
        </ul>
        <!-- TREEVIEW CODE -->
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">Treeview Div</div>
    <div class="panel-body">
        <!-- TREEVIEW CODE -->
        <div class="treeview">
            <ul>
                <li><a href="#">Tree</a>
              <ul>
               <li><a href="#">Branch</a></li>
               <li><a href="#">Branch</a>
                <ul>
                 <li><a href="#">Stick</a></li>
                 <li><a href="#">Stick</a></li>
                 <li><a href="#">Stick</a>
              <ul>
               <li><a href="#">Twig</a></li>
               <li><a href="#">Twig</a></li>
               <li><a href="#">Twig</a></li>
               <li><a href="#">Twig</a>
            <ul>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
         <li><a href="#">Leaf</a></li>
            </ul>
               </li>
               <li><a href="#">Twig</a></li>
               <li><a href="#">Twig</a></li>
              </ul>
                 </li>
                 <li><a href="#">Stick</a></li>
                </ul>
               </li>
               <li><a href="#">Branch</a></li>
               <li><a href="#">Branch</a></li>
              </ul>
             </li>
            </ul>
        </div>
        <!-- TREEVIEW CODE -->
    </div>
</div>

3. Masukan CSS

div.panel:first-child {
    margin-top:20px;
}

div.treeview {
    min-width: 100px;
    min-height: 100px;
    
    max-height: 256px;
    overflow:auto;
 
 padding: 4px;
 
 margin-bottom: 20px;
 
 color: #369;
 
 border: solid 1px;
 border-radius: 4px;
}
div.treeview ul:first-child:before {
    display: none;
}
.treeview, .treeview ul {
    margin:0;
    padding:0;
    list-style:none;
    
 color: #369;
}
.treeview ul {
    margin-left:1em;
    position:relative
}
.treeview ul ul {
    margin-left:.5em
}
.treeview ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    left:0;
    border-left:1px solid;
    
    /* creates a more theme-ready standard for the bootstrap themes */
    bottom:15px;
}
.treeview li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    font-weight:700;
    position:relative
}
.treeview ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree-indicator {
    margin-right:5px;
    
    cursor:pointer;
}
.treeview li a {
    text-decoration: none;
    color:inherit;
    
    cursor:pointer;
}
.treeview li button, .treeview li button:active, .treeview li button:focus {
    text-decoration: none;
    color:inherit;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}
.panel-heading{
    font-weight:800;
    color: #369;
}

4. Masukan JS

$.fn.extend({
 treeview: function() {
  return this.each(function() {
   // Initialize the top levels;
   var tree = $(this);
   
   tree.addClass('treeview-tree');
   tree.find('li').each(function() {
    var stick = $(this);
   });
   tree.find('li').has("ul").each(function () {
    var branch = $(this); //li with children ul
    
    branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>");
    branch.addClass('tree-branch');
    branch.on('click', function (e) {
     if (this == e.target) {
      var icon = $(this).children('i:first');
      
      icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
      $(this).children().children().toggle();
     }
    })
    branch.children().children().toggle();
    
    /**
     * The following snippet of code enables the treeview to
     * function when a button, indicator or anchor is clicked.
     *
     * It also prevents the default function of an anchor and
     * a button from firing.
     */
    branch.children('.tree-indicator, button, a').click(function(e) {
     branch.click();
     
     e.preventDefault();
    });
   });
  });
 }
});

/**
 * The following snippet of code automatically converst
 * any '.treeview' DOM elements into a treeview component.
 */
$(window).on('load', function () {
 $('.treeview').each(function () {
  var tree = $(this);
  tree.treeview();
 })
})

Tinggal santai jika blok ini bermanfaat bagi anda tolong like fans Page kami ya...
Happy Coding