Tree Menu : Simple HTML and jQuery

In this tutorial i will describe how to create simple treeview menu using jquery,We will learn about to create simple jQuery treeview menu based on static values. We will use simple HTML and jquery to create tree structure and expand and collapse functionality. You can download source code as well from here.

You can also check other tutorial of TreeView Menu,

main things on this tutorial is, we haven’t use any back-end language or JavaScript tree library to create tree structure. We have used basic HTML and jquery syntax to create tree view menus.
tree_menu

Simple Steps to Create jQuery Tree View Menu

Step 1:We will include jquery library and bootstrap in head section of file.

Select Code
1
2
<script type="text/javascript" src=".../js/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" id="font-awesome-style-css" href="../css/bootstrap3.min.css" type="text/css" media="all">

Step 2: We will define css class for design treeview menu structure.

Select Code
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<style type="text/css">

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: Arial;
  font-size: 12px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
  padding: 6px 0px 6px 16px;
}
#cssmenu > ul > li {
  cursor: pointer;
  background: #000;
}
#cssmenu > ul > li > a {
  font-size: 12px;
  display: block;
  color: #555;
  background: url(Expand.png) no-repeat 0px 12px #FFF;
  line-height:20px;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  /*border-bottom: none;*/
}
#cssmenu > ul > li.active > a {
  background: url(collapsed.png) no-repeat 0px 12px #FFF;
  color: #2771ba;
  text-shadow: 0 1px 1px #e6e6e6;
}
#cssmenu > ul > li.has-sub > a:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
}
#cssmenu > ul > li.has-sub a span{
    color:#2771ba;
    }
#cssmenu > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 12px;
}
/* Sub menu */
#cssmenu ul ul {
  padding: 0;
  display: none;
}
#cssmenu ul ul a {
  background: #fff;
  display: block;
  color: #797979;
  font-size: 12px;
  padding-left:30px;
}
#cssmenu ul li ul li a span{color:#797979 !important;}
#cssmenu ul li ul li a span:hover{color:#7293b4 !important; text-decoration:underline;}
#cssmenu ul ul li:last-child {
  border: none;
}
.addSubSec{list-style:none; padding:10px 0 0 20px; margin:0; background:url(add.png) no-repeat 0 10px; color:#989898;}
.addSub{padding-left:0; border-left:1px solid #d9d9d9;}
.addSub h3{font-size:19px; color:#929292;}

</style>

Step 3: Define html file and create treeview menu using html element.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="cssmenu">
                        <ul>
                           <li class="has-sub"><a href="#"><span>Link1</span></a>
                              <ul>
                                 <li class="even"><a href="#"><span>menu1</span></a></li>
                                 <li class="odd"><a href="#"><span>menu2</span></a></li>
                                 <li class="even"><a href="#"><span>menu3</span></a></li>
                              </ul>
                           </li>
                           <li class="has-sub"><a href="#"><span>Link2</span></a>
                              <ul>
                                 <li class="even"><a href="#"><span>link21</span></a></li>
                                 <li class="odd"><a href="#"><span>link22</span></a></li>
                                 <li class="even"><a href="#"><span>link23</span></a></li>
                              </ul>
                           </li>
                          
                        </ul>
                    </div>

Step 3: Added jquery code to expand and collapse tree menu.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
$( document ).ready(function() {
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});
});
</script>

Demo and Download Code Of Simple jQuery Tree View