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
3 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.
2 download s128
3
4 cbet hondablack
5 m.918kiss
6 daftar osg777
7
8 daftar game slot joker
Post a Comment