Tree Menu Script, Vertical Sub-Menus Navigation

Tree Menu Script

About

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

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

Preview

Vertical Sub-Menu Navigation

Menu1

Menu2

©h

Code

Javascript Code

<!-- Script by hscripts.com -->
<!-- Copyright of HIOXINDIA -->
<!-- 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="http://hscripts.com" style="text-decoration:none;cursor:pointer;color:green;font-size:12px;">&copy;hscripts.com</a></td></tr>
</table>

For customization of this script or any script development, contact us at support@hscripts.com

Usage

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

License

- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.