Home > API Shares, internet, Open-source, PHP, securenext, selvabalaji > How to create simple tree structure menu using jquery and css

How to create simple tree structure menu using jquery and css

Hey Everyone! It’s been long since I wrote any tutorial but I hope you must be enjoying.

This week I have a simple solution yet to another complicated problem. It’s the tree structure menu and here are its features.

  1. Multiple branches or sub menus.
  2. Dynamic change of arrows on toggle of the menu items.
  3. Simple css for easy understanding.
  4. Ultra slim Jquery.
  5. Sliding animation for the sub menus.

Now that you know its features here is where you can download them from. You are free to use it anywhere.

Now for the learning part, like always I’ll give you a whole break up on how I did it.

HTML Part

First we will get out HTML ready. Create a main un-ordered list with ID ‘treeMenu’. Inside this ul tag we have the first level menu items inside each li tag. If you would like to have the second level sub items then within one li tag create another ul tag and place the sub items inside it. Now for that li tag add a class called ‘contentContainer’. This is for our reference so that we know whichever li tag with class ‘contentContainer’ will have a ul item nested inside which will have second level items. And we set display none to all the second level and third level ul items. Because we don’t want to see them in the first go. They should slide down only on clicking their parent li tag.


Note: Do not forget to include JScript.js file in the header. We add this for the jquery code to work in the later part. It is the normal jquery code that you get from www.jquery.com

To be more clear here is the code.

    • Tamilnadu
      • Thiruvarur
        • BHEL
        • Thiruvarur
          • Sannathi street
          • THiruvarur
      • Selam
      • Chennai
      • Madurai

  • Bangalore
  • Orissa
  • Mangalore
  • Calicut
  • Cochin

  • Andhra
 

Now for the Jquery part

As we all know jquery is the simplified form of javascript and it has some great functions. One such function is ‘toggle()’. This function gives out a even with every click. For eg: if the first click gives out ‘A’ event, the second click gives ‘B’ event and so on. Now these events can be got with the use of multiple ‘function()’ separated by a comma. Each function() will output a event. Here how it goes in simple terms.

$("#id").toggle( function() { // START FIRST CLICK FUNCTION // WRITE ANY ACTION HERE }, // END FIRST CLICK FUNCTION function() { // START SECOND CLICK FUNCTION // WRITE ANY ACTION HERE }, // END SECOND CLICK FUNCTION … … … function() { // START LAST CLICK FUNCTION // WRITE ANY ACTION HERE } // END LAST CLICK FUNCTION ); // END TOGGLE FUNCTION 

After the last click function if still the #id is clicked then it start looping to the first click function. This is how a toggle() function works. Now that we understood this lets look into our code and see how it has helped us.

First we get ul tag through its id and target all its li tags.

$("#treeMenu li").toggle(); 

Now the first function() meant for the first click does the following magic.

  1. On click on the li it finds its child ul and slide it down. We will be using the slideDown() function for this magic. It animates the sub menu to slide down and appear.
  2. Then we check if that li which was clicked hasClass ‘contentContainer’. We will be using hasClass() function for this magic. By default in css we will add a right arrow icon to the ‘contentContainer’ class.
  3. So if the hasClass() turns out to be positive then we replace ‘contentContainer’ class with ‘contentViewing’ class. Now the ‘contentViewing’ class has a down arrow added to it through css.
  4. And this is how we change the arrows in response to the closing and opening of the menus.
  5. Now for the closing of the menus we will be using Second click function(). Because the first function() is used for the first click, automatically the second click calls for the second function().
  6. Again here will check up if the li has a ul as its child and slide it up. We will be using slideUp() function for this magic. It animates the menu to move up and disappear.
  7. Also we would replace the ‘contentViewing’ class with ‘contentContainer’ class. So that the arrow changes automatically back to closed mode.

Here is the full jquery code.

// <!--[CDATA[ // $(document).ready(function() { //Class 'contentContainer' refers to 'li' that has child with it. //By default the child ul of 'contentContainer' will be set to 'display:none' $("#treeMenu li").toggle( function() { // START FIRST CLICK FUNCTION $(this).children('ul').slideDown() if ($(this).hasClass('contentContainer')) { $(this).removeClass('contentContainer').addClass('contentViewing'); } }, // END FIRST CLICK FUNCTION function() { // START SECOND CLICK FUNCTION $(this).children('ul').slideUp() if ($(this).hasClass('contentViewing')) { $(this).removeClass('contentViewing').addClass('contentContainer'); } } // END SECOND CLICK FUNCTIOn ); // END TOGGLE FUNCTION }); // END DOCUMENT READY // ]]>

Now for the beautiful CSS

Just a few padding and margins to keep them appealing. Do not miss to note the arrow images I have given in the CSS.

/* START TREE MENU */ #treeMenu li { border-left: 1px solid #FF7300; padding:0 0 10px 10px; color:#FFFC00; } #treeMenu li.contentContainer { background:url('right.png ') no-repeat -3px 6px; color: #FFFFFF; cursor: pointer; } #treeMenu li.contentViewing { background:url('down.png ') no-repeat -4px 6px; color: #FFFFFF; } .contentContainer ul, .contentViewing ul { color:#FFFC00; margin:15px 0 0 10px; } /* END TREE MENU */ 

And that is it my friend. It is done. I hope you understood this magic. Do let me know through comments if you have any doubts and I’ll be glad to clear it out.

CODE HERE
<style>

body{
    margin:0;
    padding:0;
    background:#f1f1f1;
    font:70% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:150%;
    text-align:left;
}
a{
    text-decoration:none;
    color:#057fac;
}
a:hover{
    text-decoration:none;
    color:#999;
}
h1{
    font-size:140%;
    margin:0 20px;
    line-height:80px;    
}
#container{
    margin:0 auto;
    width:680px;
    background:#fff;
    padding-bottom:20px;
}
#content{margin:0 20px;}
p{    
    margin:0 auto;
    width:680px;
    padding:1em 0;
}

</style>

</head>

<body>

<div id="container">
    <div id="content">
        <ul id="sitemap">
            <li><a href="#">First link</a>
                <ul>
                    <li><a href="#">First link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Second link</a></li>
                    <li><a href="#">Third link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fourth link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Second link</a>
                <ul>
                    <li><a href="#">First link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Second link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Third link</a></li>
                    <li><a href="#">Fourth link</a></li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Third link</a>
                <ul>
                    <li><a href="#">First link</a></li>
                    <li><a href="#">Second link</a></li>
                    <li><a href="#">Third link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fourth link</a></li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Fourth link</a>
                <ul>
                    <li><a href="#">First link</a></li>
                    <li><a href="#">Second link</a></li>
                    <li><a href="#">Third link</a></li>
                    <li><a href="#">Fourth link</a></li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
            <li><a href="#">Fifth link</a>
                <ul>
                    <li><a href="#">First link</a></li>
                    <li><a href="#">Second link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Third link</a></li>
                    <li><a href="#">Fourth link</a>
                        <ul>
                            <li><a href="#">First link</a></li>
                            <li><a href="#">Second link</a></li>
                            <li><a href="#">Third link</a></li>
                            <li><a href="#">Fourth link</a></li>
                            <li><a href="#">Fifth link</a></li>
                        </ul>                            
                    </li>
                    <li><a href="#">Fifth link</a></li>
                </ul>                    
            </li>
        </ul>
    </div>
</div>

JS : code 

this.sitemapstyler = function(){
    var sitemap = document.getElementById("sitemap")
    if(sitemap){

        this.listItem = function(li){
            if(li.getElementsByTagName("ul").length > 0){
                var ul = li.getElementsByTagName("ul")[0];
                ul.style.display = "none";
                var span = document.createElement("span");
                span.className = "collapsed";
                span.onclick = function(){
                    ul.style.display = (ul.style.display == "none") ? "block" : "none";
                    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
                };
                li.appendChild(span);
            };
        };

        var items = sitemap.getElementsByTagName("li");
        for(var i=0;i<items.length;i++){
            listItem(items[i]);
        };

    };    
};

window.onload = sitemapstyler;
  1. December 26, 2012 at 9:27 AM

    If some one wants expert view on the topic of running a blog then i suggest
    him/her to pay a quick visit this webpage, Keep up the good work.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: