Bootstrap tree view menu example

In this demo we are giving you bootstrap tree view menu and also vertical multiple level menu design. tree view example we are create usign bootstrap-treeview jquery. this is fully responsive. In this vertical menu design we add menu name and url usign javacript array. this tree view menu is very simple to use and implement in your project.

We allows to free snippets of bootstrap tree menu , you can download full code of bootstrap treeview example code layout. Here in this post i will give you example of bootstrap treeview plugin snippet and you will get simple code of html, css and jquery. In twitter bootstrap tree widget snippet i give you three tab with html, css and js, you can easily get code of bootstrap treeview demo layout.

$(function() {
    var treeData = [
      {
        text: 'Menu 1',
        href: '#menu1',
        tags: ['4'],
        nodes: [
          {
            text: 'Sub Menu 1',
            href: '#submenu1',
            tags: ['2'],
            nodes: [
              {
                text: 'Sub Menu 1.1',
                href: '#submenu1.1',
                tags: ['0']
              },
              {
                text: 'Sub Menu 1.2',
                href: '#submenu1.2',
                tags: ['0']
              }
            ]
          },
          {
            text: 'Sub Menu 2',
            href: '#submenu2',
            tags: ['2'],
            nodes: [
              {
                text: 'Sub Menu 2.1',
                href: '#submenu2.1',
                tags: ['0']
              },
              {
                text: 'Sub Menu 2.2',
                href: '#submenu2.2',
                tags: ['0']
              }
            ]
          },
        ]
      },
      {
        text: 'Menu 2',
        href: '#menu2',
        tags: ['0']
      },
      {
        text: 'Menu 3',
        href: '#menu3',
         tags: ['0']
      },
      {
        text: 'Menu 4',
        href: '#menu4',
        tags: ['0']
      },
      {
        text: 'Menu 5',
        href: '#menu5'  ,
        tags: ['0']
      }
    ];

$('#treeview').treeview({
      data: treeData,
    });
	});

<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div id="treeview" class=""></div> </div> </div> </div> </body> </html>

body{ padding-top: 30px; background-color: #E0E0E0; } .treeview ul li{ background: #F48B94; color: #fff; } .treeview ul li:hover{ background: #fff; color: #F48B94; }