Sunday, March 14, 2010

How to create tree view/menu


How to create tree view/menu?


Following example shows you how to create simple tree view/menu using javascript.


Now a days most web site designers use tree view navigation on their web pages. Creating a tree view is very simple. You need only simple javascript and little style sheet. In a tree view navigation there can be number of nodes and sub nodes. Following examples show how to create a tree view with one level node depth and tree view with depth of two levels. Like this example you can expand this program to any number of node depth.



Demo- Create tree view / menu using JavaScript.
 » 

How to create simple tree view/menu?

Node depth=1
  
»

How to create simple tree view/menu?

Node depth=2

Useful Web Sites
Search Engines
Social Networks
Encyclopedia


Sample Tree View
Sample Submenu 1
Sample Submenu 3
Sample Submenu 3



Bookmark and Share



Try It!







1. Example code for create tree view/menu in JavaScript.

JavaScript Code
<script type="text/javascript" language="javascript">

<!--
function hide_menu(node_id,menu_type){

var node_prefix="";

switch(menu_type){

case 1:{

node_prefix="node_";

}break;

case 2:{

node_prefix="main_node_";

}break;

}



var node=document.getElementById(node_prefix+node_id);

var node_status=document.getElementById(node_prefix+node_id+"_status");

var node_text=document.getElementById(node_prefix+node_id+"_title");
if(node_status.value=="1"){

node.style.display = "none";

}else{

node.style.display = "";

}

if(node_status.value=="1"){

node_status.value="0";

node_text.innerHTML="&#9658";

}else{

node_status.value="1";

node_text.innerHTML="&#9660";

}

return false;

}
-->

</script>
CSS Code
<style type="text/css">

.node_content{

padding-left:30px;

}

.node_title{

vertical-align:top;

}

.link_text{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:10px;

text-decoration:none;

}

.link_text:hover{

text-shadow:#FFCC00;

font-weight:bold;

}

.node_title{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

text-decoration:none;

}

</style>
HTML Code
<html>

<head><title>How to create tree view in JavaScript </title>

</head><body>

<div id="myMenu">

<div id="node_title_1"><a href="javascript:void(0);" onclick="javascript:hide_menu('1',1);" class="link_text">

<span class="node_title" id="node_1_title">&#9660;</span></a><span class="node_title">Sample Tree Menu 1 </span>

<div id="node_1">

<div id="node_1_link_1" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 1 </a></div>

<div id="node_1_link_2" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 2 </a></div>

<div id="node_1_link_3" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 3 </a></div>

</div><input type="hidden" id="node_1_status" name="node_1_status" value="1" />

</div>

<div id="node_title_2"><a href="javascript:void(0);" onclick="javascript:hide_menu('2',1);" class="link_text"> <span class="node_title" id="node_2_title">&#9660;</span></a><span class="node_title">Sample Tree Menu 2 </span>

<div id="node_2">

<div id="node_2_link_1" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 4 </a></div>

<div id="node_2_link_2" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 5 </a></div>

<div id="node_2_link_3" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 6 </a></div>

</div><input type="hidden" id="node_2_status" name="node_2_status" value="1" />

</div>

<div id="node_title_3"><a href="javascript:void(0);" onclick="javascript:hide_menu('3',1);" class="link_text"> <span class="node_title" id="node_3_title">&#9660;</span></a><span class="node_title">Sample Tree Menu 3 </span>

<div id="node_3">

<div id="node_3_link_1" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 7 </a></div>

<div id="node_3_link_2" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 8 </a></div>

<div id="node_3_link_3" class="node_content">&bull;&nbsp;<a href="javascript:void(0);" class="link_text">Sample tree menu link 9 </a></div>

</div><input type="hidden" id="node_3_status" name="node_3_status" value="1" />

</div></div>

</body>

</html>
 



 »   How to get screen resolution in JavaScript
 »   How to limit characters in textarea using JavaScript
 »   How to validate decimal number in JavaScript
 »   How to validate an email address in JavaScript
 »   How to validate date using JavaScript
 »   JavaScript String functions
 »   How to validate multiple select list box in JavaScript
 »   How to generate random numbers in JavaScript
 »   How to validate multiple check box in JavaScript
 »   How to validate user login in JavaScript
 »   How to validate drop down list in JavaScript
 »   How to validate radio button group in JavaScript
 »   How to create JavaScript alerts
 »    How to create popup windows in JavaScript
 »   How to count words in a text area using JavaScript



©-Copyright By Duminda Chamara
JavaScript Validation  

3 comments:

Mike said...

Thanks for the article. I've posted a similar article explaining how to create an ExtJS based document viewer which leverages a treeview control. Here is the example and here is the article. Enjoy!

Anonymous said...

Can you have items in collapse mode initially? it get expanded when user clicks on the menu node.

Juliana Kho said...

2 download s128
3
4 cbet hondablack
5 m.918kiss
6 daftar osg777
7
8 daftar game slot joker