<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>
ul { display:none; margin: 10px; padding-left: 0 !important; }
$(document).ready(function(){ $("p").live('click',function(){ $(this).next().slideToggle("slow"); });
$("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(); });
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.
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.
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.