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.
- Multiple branches or sub menus.
- Dynamic change of arrows on toggle of the menu items.
- Simple css for easy understanding.
- Ultra slim Jquery.
- 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
- 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.
- On click on the
liit finds its childuland slide it down. We will be using theslideDown()function for this magic. It animates the sub menu to slide down and appear. - Then we check if that
liwhich was clicked hasClass‘contentContainer’. We will be usinghasClass()function for this magic. By default in css we will add a right arrow icon to the‘contentContainer’class. - 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. - And this is how we change the arrows in response to the closing and opening of the menus.
- Now for the closing of the menus we will be using Second click
function(). Because the firstfunction()is used for the first click, automatically the second click calls for the secondfunction(). - Again here will check up if the
lihas aulas its child and slide it up. We will be usingslideUp()function for this magic. It animates the menu to move up and disappear. - 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;
Related articles
- jQuery and CSS Menus with Animations (itswadesh.wordpress.com)
- creating unordered list with jquery (daniweb.com)
- 20 jquery drop down menus you should try (itswadesh.wordpress.com)
- Superslides – A jQuery Full Screen Slider Plugin (functionn.blogspot.com)
- Interactive Image Vamp up with jQuery, CSS3 and PHP (mt-soft.com.ar)
Categories: API Shares, internet, Open-source, PHP, securenext, selvabalaji
Cascading Style Sheets, CSS, Data Formats, HTML, HTML element, JavaScript, JQuery, Style Sheets, Thiruvarur
Leave a comment
Subscribe Via Email
Agaram Foundation
29,Vijay Enclave Krishna Street,
T.Nagar, Chennai - 600 017
Tamil Nadu, India.
Telephone : +91 44 4350 6361
Mobile : +91 98418 91000
Email : info@agaram.in
Site Info
Recent Comments
SELVABALAJI NEWS
- An error has occurred; the feed is probably down. Try again later.
Vistor Location
Unknown Feed
- An error has occurred; the feed is probably down. Try again later.
Unknown Feed
- An error has occurred; the feed is probably down. Try again later.
Unknown Feed
- An error has occurred; the feed is probably down. Try again later.
LeadSquared
- Into the Unknown: Embracing a Bold, Student-First Strategy for Enrollment Success
- Top 10 Sales Gamification Tools For 2024
- Top 9 CRMNext Alternatives in 2024
- Closing the Deal: 6 Surefire Strategies to Exceed Your Sales Targets
- Sales Automation 101:Unclog your Sales Pipeline
- KRA of Sales Manager and How to Track Performance
- Top 10 Healthcare CRM in the United States
- Why Do 70% of Online Inquiries Drop Off?
- Top 6 Paramantra Alternatives for Real-Estate Businesses in 2024
- Top 10 Spotio Alternatives for Field Reps
singershalini
- Untitled
- Pop Shalini Verified #Spotify Artist Playlist
- Pop Shalini's Interesting reads #Murakami
- Pop Shalini performs for Harris Jeyraj's concert with Benny Dayal and Haricharan
- Pop Shalini sings Vandhe Mataram
- Pop Shalini Sings her famous song Mudhal Naal Indru - Unaale Unaale
- Pop Shalini wishes Superstar RajiniKanth on the Dada Saheb Phalke Award
- A song for a Rainy day from my first album #Shalini - Chinna Chinna Mazhai thooral
- ipopshalini Verified Artiste sings Ranjha from Shershaah
- Chennai Floods
Flickr Photos
Advertsiment
S e L v A B a L a J e E 
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.