Treemenu examples

jQuery plugin

treemenu.js examples

Simple treemenu.js demo

  1. add jquery and treemenu javascript files to your html
    <script src="jquery.min.js"></script>
    <script src="jquery.treemenu.js"></script>
  2. use <ul> and <li> elements to write tree menu structure, like this:
    <ul id="tree1">
         <li><a href="">Home</a></li>
         <li><span>Prices</span>
             <ul>
                 <li><a href="#">Transport</a>
                     <ul>
                         <li><a href="#hovertanks">Hover tanks</a></li>
                         <li><a href="#doomstars">Doomstars</a></li>
                         <li><a href="#shuttles">Shuttles</a></li>
                     </ul>
                 </li>
                 <li><a href="#weapons" class="active">Weapons</a>
                     <ul>
                         <li><a href="#knives">Knives</a></li>
                         <li><a href="#grenades">Grenades</a></li>
                         <li><a href="#lasers">Lasers</a></li>
                     </ul>
                 </li>
                 <li><a href="#suits">Suits</a></li>
             </ul>
         </li>
         <li><a href="#about">About</a>
             <ul>
                 <li><a href="#contacts">Contacts</a></li>
                 <li><a href="#history">History</a></li>
                 <li><a href="#jobs">Jobs</a>
                     <ul>
                         <li><a href="#jobs1">Pirates</a></li>
                         <li><a href="#jobs2">Ninjas</a></li>
                         <li><a href="#jobs3">Knights</a></li>
                         <li><a href="https://github.com/about/jobs">Octo-cats</a></li>
                     </ul>
                 </li>
             </ul>
         </li>
    </ul>
    
  3. call jquery.treemenu method $("ul").treemenu();

Without any options

$("#tree1").treemenu();

Animation with 'delay' option

$("#tree1-2").treemenu({'delay': 200});

With 'openActive' option

$("#tree2").treemenu({'openActive': true});

With 'closeOther' option

$("#tree3").treemenu({'closeOther': true});
π