In this jQuery tutorial, I will describe how to create simple tree view 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,
- Tree Menu Using HTML and Jquery
- How to Create Dynamic Tree View Menu
- Dynamic Tree with JSTree, PHP and MySQL
- 10+ Most Popular jQuery Tree Menu Plugin
main motto of this jQuery tutorial is to create multilevel menu using bootstrap css and jquery, 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 menu.
Simple Steps to Create jQuery Tree View Menu
Created index.html file that will contains all jQuery and css class.
Step 1: We will include jquery library and bootstrap in head section of index.html file.
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 add below css class to design treeview menu structure in head section of index.html file.
[code type=css]
Step 3: Define html file and create treeview menu using html element in index.html file.
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 4: Added jQuery code to expand and collapse tree menu in footer section of index.html file.
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> |
