Ajax Accordion example to create Vertical DropDown menu in asp.net

Introduction: In this article I am going to explain with example how to use Ajax Accordion control to create Vertical Drop Down menu with sub menu option in asp.net.

Accordion control to create menu in asp.net
Description: The Accordion control provided by the Ajax is a web control that allows us to provide multiple panes in the small area of the page and display them one at a time. When one pane is opened other will be closed. So it is like having multiple Collapsible Panels where only one can be expanded at a time. Other panes can be opened by clicking on the desired pane as shown in the Image.



Below are some of the properties of the Accordion  control that can be set as per requirement.
  • SelectedIndex – This property sets AccordionPane to be initially visible e.g. if set  to 0 then very first AccordionPane will be opened(it is default)
  • HeaderCssClass – It is the Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or for an individual AccordionPane.
  • HeaderSelectedCssClass – It is the Name of the CSS class to use for the selected header. This can be either applied to the Accordion as a default for all AccordionPanes, or for an individual AccordionPane.
  • ContentCssClass – It is the Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or for an individual AccordionPane.
  • FadeTransitions – Set this property to True to use the fading transition effect and set to false for standard transitions.
  • TransitionDuration – It is Number of milliseconds to animate the transitions e.g. 350 in our example.
  • FramesPerSecond – It is Number of frames per second used in the transition animations e.g. 60 in our example.
  • RequireOpenedPane – This property is used to prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
  • SuppressHeaderPostbacks – This property prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility)
  • Panes – It is a collection of AccordionPane controls
  • HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding
  • ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding
  • DataSource – If data source is used then DataBind() must be called.
  • DataSourceID - The ID of the data source to use.
  • DataMember - The member to bind to when using a DataSourceID
  • AutoSize – This Property is used to set the height of the accordion control. This Property has  3 types
  1. None- Using this Accordion can grows/shrinks without restriction
  2. Auto- Using this Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed in the specified height. 
  3. Fill- The Accordion always stays in the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.

ImplementationLet’s understand by practical example.
  •   Place a ScriptManager control from the AJAX Extensions category of the Visual Studio's toolbox.
<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>   
<asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" AutoSize="Limit"
            BackColor="#EF8421" FadeTransitions="true" TransitionDuration="350" FramesPerSecond="60" RequireOpenedPane="true" Width="200px" Font-Names="Verdana" Font-Size="Smaller">
        <Panes>
        <asp:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        <div style="background:#EF8421; font-size: medium; cursor: hand; border: 1px Solid #FFFFFF; color:#FFFFFF; padding-left:10px;">
                            Menu 1
                        </div>
                    </Header>
                    <Content>
                        <div style="background:#FFFFFF;border: 1px Solid #FFFFFF; color:#FFFFFF;">
                            <ul style="list-style-type: none;">
                                <li><a href="#">Sub Menu 1</a></li>
                                    <li><a href="#">Sub Menu 2</a></li>
                                        <li><a href="#">Sub Menu 3</a></li>
                                            <li><a href="#">Sub Menu 4</a></li>                                              
                            </ul>
                        </div>
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        <div style="background:#EF8421; font-size: medium; cursor: hand; border: 1px Solid #FFFFFF; color:#FFFFFF; padding-left:10px;">
                           Menu 2
                        </div>
                    </Header>
                    <Content>
                        <div style="background:#FFFFFF;border: 1px Solid #FFFFFF; color:#FFFFFF">
                            <ul style="list-style-type: none;">
                                <li><a href="#">Sub Menu 1</a></li>
                                    <li><a href="#">Sub Menu 2</a></li>
                                        <li><a href="#">Sub Menu 3</a></li>                                           
                            </ul>
                        </div>
                    </Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        <div style="background:#EF8421; font-size: medium; cursor: hand; border: 1px Solid #FFFFFF; color:#FFFFFF; padding-left:10px;">
                           Menu 3
                        </div>
                    </Header>
                    <Content>
                        <div style="background:#FFFFFF;border: 1px Solid #FFFFFF; color:#FFFFFF">
                            <ul style="list-style-type: none;">
                                <li><a href="#">Sub Menu 1</a></li>
                                    <li><a href="#">Sub Menu 2</a></li>
                                        <li><a href="#">Sub Menu 3</a></li>                                          
                            </ul>
                        </div>
                    </Content>
                </asp:AccordionPane>               
        </Panes>
        </asp:Accordion

  • Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing Accordion control on design page.

Note: If you want the Headers of the Accordion control to be Click able i.e. act as a main menu then replace the Menu 1 with <a href="#" style="color:#FFF; text-decoration:none; margin-left:10px;"> Menu 1</a>
Similarly Menu 2 with <a href="#" style="color:#FFF; text-decoration:none; margin-left:10px;"> Menu 2</a> and so on.

Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."
Previous
Next Post »

3 comments

Click here for comments
Anonymous
admin
November 10, 2013 ×

very nice
thanksssssssssssssss

Reply
avatar
November 10, 2013 ×

thanks for appreciating my work..stay tuned and keep reading for more updates like this..:)

Reply
avatar
annu
admin
December 19, 2013 ×

How can bind menu and submenu with xml file .

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..