collapse/expand menu items

Posted by Sudhak under ASP.NET on 9/9/2009 | Views : 6421 | Status : [Member] | Replies : 3
hi
i need a menucontrol in which menuitems when clicked the items which are present under menuitems must be collpased and expanded
please any help


Regards
Sudha




Responses

Posted by: Lakhangarg on: 9/9/2009 [Member] [Moderator] Silver

Up
0
Down
Hi Sudha-

Use Jquery for this downlaod jQuery.js and use the following code:

var vRootUrl="http://192.168.17.207/2009";var j=jQuery.noConflict();j(document).ready(function(){j("#nicemenu img.arrow").click(function(){j("span.head_menu").removeClass('active');submenu=j(this).parent().parent().find("div.sub_menu");if(submenu.css('display')=="block"){j(this).parent().removeClass("active");submenu.hide();j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_hover.gif')}else{j(this).parent().addClass("active");submenu.fadeIn();j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_select.gif')}j("div.sub_menu:visible").not(submenu).hide();j("#nicemenu img.arrow").not(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow.gif')}).mouseover(function(){j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_hover.gif')}).mouseout(function(){if(j(this).parent().parent().find("div.sub_menu").css('display')!="block"){j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow.gif')}else{j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_select.gif')}});j("#nicemenu span.head_menu").mouseover(function(){j(this).addClass('link11:hover')}).mouseout(function(){j(this).removeClass('link11:hover')});j("#nicemenu div.sub_menu").mouseover(function(){j(this).fadeIn()}).blur(function(){j(this).hide();j("span.head_menu").removeClass('active')});j("#profilemenu img.arrow").click(function(){j("span.head_menu").removeClass('active');submenu=j(this).parent().parent().find("div.sub_menu");if(submenu.css('display')=="block"){j(this).parent().removeClass("active");submenu.hide();j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_hover.gif')}else{j(this).parent().addClass("active");submenu.fadeIn();j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_select.gif')}j("div.sub_menu:visible").not(submenu).hide();var lText="<div style=\"height:20px;float:left;font-size:11px;color:#999\">Loading <img src=\""+vRootUrl+"/css/css/skin01/images/loader.gif\" ></div>";j("#divProfile").html(lText);j("#profilemenu img.arrow").not(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow.gif');var tsTimeStamp=new Date().getTime();j.get(vRootUrl+"/Action/HeaderProfileSummary.aspx",{action:"get",time:tsTimeStamp},function(data){var DivsIndex=data.indexOf("<div id=\"divPopUp\">");var DivlIndex=data.indexOf("</form>");data=data.substring(DivsIndex,DivlIndex);j("#divProfile").html(data)})}).mouseover(function(){j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_hover.gif')}).mouseout(function(){if(j(this).parent().parent().find("div.sub_menu").css('display')!="block"){j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow.gif')}else{j(this).attr('src',vRootUrl+'/css/css/skin01/images/arrow_select.gif')}});j(document).click(function(event){var target=j(event.target);if(target.parents("#nicemenu").length==0){j("#nicemenu span.head_menu").removeClass('active');j("#nicemenu div.sub_menu").hide();j("#nicemenu img.arrow").attr('src',vRootUrl+'/css/css/skin01/images/arrow.gif')}if(target.parents("#profilemenu").length==0){j("#profilemenu span.head_menu").removeClass('active');j("#profilemenu div.sub_menu").hide();j("#profilemenu img.arrow").attr('src',vRootUrl+'/css/css/skin01/images/arrow.gif')}})});


Use this kind of HTML:
<ul>
<li><span class="head_menu"><a href="<%=RootUrl %>/teaching-online/" rel="dropmenu1_first">
Teach</a><img src="<%=RootUrl %>/css/css/skin01/images/arrow.gif" width="18"
height="15" align="top" class="arrow" /></span>
<div class="sub_menu" style="width:185px">
<a href="<%=RootUrl %>/learning-requests/">Find Learners to Teach <img src="<%=RootUrl %>/css/css/skin01/images/new.gif" width="23" height="10" align="top" /></a>
<a href="<%=RootUrl %>/teaching-online/">
How to Teach Online</a> <a href="<%=RootUrl %>/tour/earn_while_teaching.aspx">Teach
and Earn</a> <a id="hlnkPremium" runat="server" href="<%=RootUrl %>/premium/">Upgrade to Premium</a> <a href="<%=RootUrl %>/how/">
Request a Demo</a>
</div>
</li>
<li><span class="head_menu"><a href="<%=RootUrl %>/learning-online/">Learn</a><img
src="<%=RootUrl %>/css/css/skin01/images/arrow.gif" width="18" height="15"
align="top" class="arrow" /></span>
<div class="sub_menu" style="width:185px">
<a href="<%=RootUrl %>/student-learning-request.aspx">Submit a Learning Request <img src="<%=RootUrl %>/css/css/skin01/images/new.gif" width="23" height="10" align="top" /></a>
<a href="<%=RootUrl %>/teachers-directory/">View Teacher Directory</a> <a href="<%=RootUrl %>/learning-online/">
How to Learn Online</a>
</div>
</li>
</ul>

Sudhak, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rtpharry on: 9/9/2009 [Member] [MVP] Bronze

Up
0
Down
Hey,

I would highly recommend using jQuery as your javascript library.

There are many plugins for jQuery which enable expand/collapse effects:

http://www.google.co.uk/search?q=jquery+expand+menu

Sudhak, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sudhak on: 9/10/2009 [Member] Starter

Up
0
Down
Hi Friends

thanks for your response
but i want it in asp.net

regards
sudha

Sudhak, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response