• Now Online : 64
  • admin@codemyne.net
Introduction:
                   Hello Friend I am new to this site and this is my first article i hope u all like this article. This article is base on accordion menu in which i have implemented add and remove options  so that it will be easy for you to add any number of sub-menus and any levels of sub-menus. This tech article is purely designed and developed using XHtml, Jquery and CSS so i hope it will not take much of your CPU memory :-).

Description:

             Initially I have created 3 root menus .Net, Java and Php. These root menus are given within <p> tags .I have also provided 3 sub-menus to each root menus. These Sub-menus are given within <ul>and <li> I am very sure of not using table structure as you all know  table structure is not recommended.
 
<div class="panel" id="panel_1">
                    <p class="flip" ><a href="#" class="remove">x </a>.net <span class="embed">Add</span></p>
                        <ul>
                            <li><a class="remove_c"href="#">x </a>Arun<input type="button" class="integ" value="Add"/></li>
                            <li><a class="remove_c"href="#">x </a>Ajay<input type="button" class="integ" value="Add"/></li>
                            <li><a class="remove_c"href="#">x </a>Ashok<input type="button" class="integ" value="Add"/></li>
                        </ul>
                </div>
             
            Then I have given a link to external style sheet to decorate my application. In css i have given display as none to <ul> so that initially when the page get loads you may able to see only the root menus and all the sub-menus are not displayed.

 ul
 {
display:none;
margin: 10px;
padding-left: 0 !important;
}
               
          Now comes Jquery part.In this article i have used jquery codes for animation and dynamic loading of html tags.

$(document).ready(function(){ $("p").live('click',function(){
              $(this).next().slideToggle("slow");
               });  
              
        The above code is used for sliding the menu up and down. 

  $("input.integ").live('click',function(){  
                    $(this).parent().after("<li><a class=\"remove_c\" href=\"#\">x </a><input type=\"text\" id=\"temp_text\"value=\"\" name=\"\"/>  <input type=\"button\" name=\"test\" value=\"Add\" id=\"temp_button\"/></li>");
                });
    
             $("input#temp_button").live('click', function(){
             val=$("#temp_text").val();
             $(this).parent().html("<a class=\"remove_c\"href=\"#\">x </a>"+val+"<input type=\"button\" class=\"integ\" value=\"Add\"/>");
             });

             $("span.embed").live('click',function(){
             $(this).parent().next().append(" <p class=\"flip\"><a class=\"remove\" href=\"#\">x </a><input type=\"text\" id=\"temptext\"value=\"\" name=\"\"/> <span  id=\"temp_span\">Add</span></p><ul><li><a class=\"remove_c\"href=\"#\">x </a><input type=\"text\" id=\"temp_text\"value=\"\" name=\"\"/>  <input type=\"button\" name=\"test\" value=\"Add\" id=\"temp_button\"/></li>");
             });

             $("span#temp_span").live('click', function(){
             val=$("#temptext").val();
             $(this).parent().html("<a class=\"remove\"href=\"#\">x </a>"+val+"<span class=\"embed\">Add</span>");
             });

             $("a.remove_c").live('click',function(){
             $(this).parent().remove(); 
             });

             $("a.remove").live('click',function(){
             $(this).parent().next().remove();
             $(this).parent().remove();  
             });
                
            Every menu and sub-menu has "X" for removing the corresponding  element and "Add" for adding a sibling element below. So in jquery code i have given some inner HTML codes for adding new sibling which also contain same add and remove options this add and remove options are used to call the same jquery code again and again so that we can add any number of sibling elements.

Conclusion:   

          Sub Menus and leaf menus which are generated during the run time are volatile so if we re-start the application all the menus created during last session will not be displayed .My future implementation is to make dynamic changes permanent by storing the data into a database .Now i have done these menu structure with Sql server database and .net to make dynamic changes to be permanent  without using ajax but i am able to do till the depth of level-2. Please if any one have some idea let me know and give me your comments if there is any issue regarding this article. Thank you.

Comments Post a Comment

nesa 12/2/2011 (IST) / Reply

gud job Mr.Balakrishnan........ Congrats....

Balakrishnan 12/3/2011 (IST) / Reply

Thank you Nesa

srujana 12/7/2011 (IST) / Reply

Good one, pls keep writing on jquery

ankith soni 12/7/2011 (IST) / Reply

Can you please help me to create facebook like friend search in Mvc3..!

Balakrishnan 12/8/2011 (IST) / Reply

Thank you...Srujana

Balakrishnan 12/8/2011 (IST) / Reply

Hello Ankith soni.. you put me mails regarding your doubts to er.balakrishnan.d@gmail.com I ll suerly help you when i am free. bye TC

bala 4/17/2012 (IST) / Reply

this

aks 6/13/2012 (IST) / Reply

vertical_menu_structure.zip file is not getting downloaded plz help

Webmaster 6/14/2012 (IST) / Reply

To Aks: Now please try to down load the file. It is working now.

News Feeds

News Tags

Tabs

I'm in Section 1.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Howdy, I'm in Section 2.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.

Recent Twitts

At vero eos et accusamus et iusto odio.

http://t.co/sBav7dm 5 hours ago

At vero eos et accusamus et iusto odio.

http://t.co/sBav7dm 8 hours ago

At vero eos et accusamus et iusto odio.

http://t.co/sBav7dm 12 hours ago

Flickr