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.
Try It!
| » | How to create simple tree view/menu?Node depth=1 |
| » | How to create simple tree view/menu?Node depth=2 |
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");
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="►";
}else{
node_status.value="1";
node_text.innerHTML="▼";
}
return false;
}
node.style.display = "none";
}else{
node.style.display = "";
}
if(node_status.value=="1"){
node_status.value="0";
node_text.innerHTML="►";
}else{
node_status.value="1";
node_text.innerHTML="▼";
}
return false;
}
-->
</script>
</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">▼</span></a><span class="node_title">Sample Tree Menu 1 </span>
<div id="node_1">
<div id="node_1_link_1" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 1 </a></div>
<div id="node_1_link_2" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 2 </a></div>
<div id="node_1_link_3" class="node_content">• <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">▼</span></a><span class="node_title">Sample Tree Menu 2 </span>
<div id="node_2">
<div id="node_2_link_1" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 4 </a></div>
<div id="node_2_link_2" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 5 </a></div>
<div id="node_2_link_3" class="node_content">• <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">▼</span></a><span class="node_title">Sample Tree Menu 3 </span>
<div id="node_3">
<div id="node_3_link_1" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 7 </a></div>
<div id="node_3_link_2" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 8 </a></div>
<div id="node_3_link_3" class="node_content">• <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>
<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">▼</span></a><span class="node_title">Sample Tree Menu 1 </span>
<div id="node_1">
<div id="node_1_link_1" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 1 </a></div>
<div id="node_1_link_2" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 2 </a></div>
<div id="node_1_link_3" class="node_content">• <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">▼</span></a><span class="node_title">Sample Tree Menu 2 </span>
<div id="node_2">
<div id="node_2_link_1" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 4 </a></div>
<div id="node_2_link_2" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 5 </a></div>
<div id="node_2_link_3" class="node_content">• <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">▼</span></a><span class="node_title">Sample Tree Menu 3 </span>
<div id="node_3">
<div id="node_3_link_1" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 7 </a></div>
<div id="node_3_link_2" class="node_content">• <a href="javascript:void(0);" class="link_text">Sample tree menu link 8 </a></div>
<div id="node_3_link_3" class="node_content">• <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>
©-Copyright By Duminda Chamara
JavaScript Validation
JavaScript Validation
2 comments:
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!
Can you have items in collapse mode initially? it get expanded when user clicks on the menu node.
Post a Comment