Tree Menu Script

The Tree menu script lists sub-menus in tree format. Open or Close the submenus by a mouse click. Easy vertical menu navigation script.

Features

  • Mouce click to Open / Close submenus.
  • Allows HTML codes to be used inside sub-menus.
  • Fully customizable and fast loading.
  • Compatible with all major browsers and platforms.

Preview

Vertical Sub-Menu Navigation

©h

Downloads

Javascript Code


<!-- Script by hscripts.com -->
<!-- More scripts @www.hscripts.com -->
<script type="text/javascript">
var ass= 1;
var fonttt;
function addChildss(das)
{
var nam =das;
if(das == "menu1")
{
var tdr = document.getElementById("menu1");
removeChildss(fonttt);
fonttt = tdr.getElementsByTagName('font').item(0);
removeChildss(fonttt);
addChil(fonttt,"#","Submenu11");
addChil(fonttt,"#","Submenu12");
addChil(fonttt,"#","Submenu13");
}
else if(das="menu2")
{
var tdr = document.getElementById("menu2");
removeChildss(fonttt);
fonttt = tdr.getElementsByTagName('font').item(0);
removeChildss(fonttt);
addChil(fonttt,"#"," Submenu21");
addChil(fonttt,"#"," Submenu22");
addChil(fonttt,"#"," Submenu23");
}
}
function removeChildss(fonttt)
{
if(fonttt != null)
{
while(fonttt.hasChildNodes() && fonttt.childNodes.length > 1)
{
if(ass > 1)
{
fonttt.removeChild(fonttt.lastChild);
}
ass = ass+1;
}
}
}
var love = "yes";
function addChil(parent,linkname,textname)
{
var breaka = document.createElement("br");
var divs= document.createElement("div");
var link = document.createElement("a");
link.setAttribute("href",linkname);
link.style.color="#aa300a";
divs.style.marginLeft="8px";
divs.style.marginRight="4px";
divs.style.paddingLeft="3px";
divs.style.fontSize="12px";
divs.style.lineHeight="20px";
divs.style.border="0px green solid";
if(love == "yes")
{
divs.style.backgroundColor="#beefec";
love = "no";
}
else
{
divs.style.backgroundColor="#dfffdf";
love = "yes";
}
link.style.textDecoration="none";
var name = document.createTextNode(textname);
parent.appendChild(divs);
divs.appendChild(link);
link.appendChild(name);
}
</script>
<!-- Script by hscripts.com -->


HTML with CSS Code


<style type="text/css">
.heading { font-size:14px;padding-left: 2px; border-bottom: grey solid 0px; color: white; background-color: #ffffff;}
.heading1 {
font-size: 11px;
text-decoration: none; color: #333333;
font-family: verdana,arial,serif; font-weight: 400; cursor: pointer;}
</style>
<table align=center style="border:1px solid grey;">
<tr><td id="menu1" onclick="addChildss('menu1')" class=heading><img src="insert.jpg" align="absmiddle">
<font class=heading1>Menu1</font></td></tr>
<tr><td id="menu2" onclick="addChildss('menu2')" class=heading><img src="insert.jpg" align="absmiddle">
<font class=heading1>Menu2</font>
</td></tr>
<tr><td><a href="https://www.hscripts.com" style="text-decoration:none;cursor:pointer;color:green;font-size:12px;">&copy;hscripts.com</a></td></tr>
</table>


  • Release Date - 18-09-2009
  • Get free version without ©copyright link for just $10/-
  • For customization of this script or any script development, mail to support@hscripts.com

Usage

  • Copy and paste the javascript code into your HTML page and make use of this.
  • Ability to define multiple Tree menus on the same page.
  • Vertical navigation of the Tree Menu.

License

Related Scripts

Free Javascript Scripts


Ask Questions

Ask Question