Scribd
Upload
189 views4 pages

Accordion Menu With Dynamic Links

This document describes how to create an accordion menu with dynamic links in ASP.NET. It includes code to initialize an accordion menu using JavaScript, add styling with CSS, and populate panels within the accordion menu with dynamically generated LinkButtons on the server side in the code-behind file.

Uploaded by

info.glcom5161
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
189 views4 pages

Accordion Menu With Dynamic Links

This document describes how to create an accordion menu with dynamic links in ASP.NET. It includes code to initialize an accordion menu using JavaScript, add styling with CSS, and populate panels within the accordion menu with dynamically generated LinkButtons on the server side in the code-behind file.

Uploaded by

info.glcom5161
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Accordion menu with dynamic links in asp.

net
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inhe
rits="AccordionMenu.WebForm7" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqu
ery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynami
cdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseove
r the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseco
nds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any
time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, ind
ex2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open
always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated int
o view?
persiststate: true, //persist state of opened contents within browser se
ssion?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the he
ader when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it'
s collapsed and expanded, respectively ["position", "html1", "html2"] (see docs
)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie:
200), or keywords "fast", "normal", or "slow"
oninit: function (headers, expandedindices) { //custom code to run when
headers have initalized
//do nothing
},
onopenclose: function (header, index, state, isuseractivated) { //custom
code to run whenever a header is opened or closed

//do nothing
}
})
</script>
<style type="text/css">
.applemenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
}
.applemenu div.silverheader a{
background: black url(images/silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif
;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(images/silvergradientover.gif);
color: white;
}
.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when head
ers are toggled via "mouseover" instead of "click"*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="applemenu">
<div class="silverheader"><asp:LinkButton ID="lnkNational" runat="server
">National Members</asp:LinkButton></div>
<div class="submenu">
<asp:Panel ID="pnlCountries" runat="server"></asp:Panel>
<br />
</div>

<div class="silverheader"><asp:LinkButton ID="lnkState" runat="server">S


tate Members</asp:LinkButton></div>
<div class="submenu">
<asp:Panel ID="pnlStates" runat="server"></asp:Panel>
<br />
</div>
<div class="silverheader"><asp:LinkButton ID="lnkDistrict" runat="server
">District Members</asp:LinkButton></div>
<div class="submenu">
<asp:Panel ID="pnlDistricts" runat="server"></asp:Panel>
<br />
</div>
</div>

</div>
</form>
</body>
</html>
using
using
using
using
using
using

System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.UI;
System.Web.UI.WebControls;

namespace AccordionMenu
{
public partial class WebForm7 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
LinkButton lic1 = new LinkButton();
lic1.Text = "India";
lic1.PostBackUrl = "#";
LinkButton lic2 = new LinkButton();
lic2.Text = "China";
lic2.PostBackUrl = "#";
Table tbc = new Table();
TableRow trc1 = new TableRow();
TableRow trc2 = new TableRow();
TableCell tcc1 = new TableCell();
TableCell tcc2 = new TableCell();
tcc1.Controls.Add(lic1);
tcc2.Controls.Add(lic2);
trc1.Cells.Add(tcc1);
trc2.Cells.Add(tcc2);
tbc.Rows.Add(trc1);
tbc.Rows.Add(trc2);
pnlCountries.Controls.Add(tbc);
LinkButton lis1 = new LinkButton();
lis1.Text = "Kerala";
LinkButton lis2 = new LinkButton();
lis2.Text = "Tamilnadu";
Table tbs = new Table();
TableRow trs1 = new TableRow();
TableRow trs2 = new TableRow();

TableCell tcs1 = new TableCell();


TableCell tcs2 = new TableCell();
tcs1.Controls.Add(lis1);
tcs2.Controls.Add(lis2);
trs1.Cells.Add(tcs1);
trs2.Cells.Add(tcs2);
tbs.Rows.Add(trs1);
tbs.Rows.Add(trs2);
pnlStates.Controls.Add(tbs);
LinkButton lid1 = new LinkButton();
lid1.Text = "Ernakulam";
LinkButton lid2 = new LinkButton();
lid2.Text = "Trissur";
Table tbd = new Table();
TableRow trd1 = new TableRow();
TableRow trd2 = new TableRow();
TableCell tcd1 = new TableCell();
TableCell tcd2 = new TableCell();
tcd1.Controls.Add(lid1);
tcd2.Controls.Add(lid2);
trd1.Cells.Add(tcd1);
trd2.Cells.Add(tcd2);
tbd.Rows.Add(trd1);
tbd.Rows.Add(trd2);
pnlDistricts.Controls.Add(tbd);
}
}
}
Post

You might also like