Asp.Net AJAX ile birlikte gelen Accordion ve AccordionPane kontrollerinin CSS ile kullanımı sonucu ortaya çıkan efektif görünümlü menüyü sizlerle paylaşmak istedim.

Adım 1. Menüyü Şekillendirmek

Öncelikle Header kısmı ile başlayıp daha sonrada contenet kısmını şekillendirelim.

CSS

.accordion {
	padding: 0 0 0 50px;
	margin: 0 0 5px 0;
	background: url(accordion.gif) no-repeat;
	height: 46px;
	line-height: 46px;
	width: 450px;
	font-size: 2em;
	font-weight: normal;           
        color:#fff;               
        cursor:pointer;
}
.accordion:hover {
	color: #ccc; cursor:pointer;
}
.active {
        background-position: left bottom;
}
.accordionContainer {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	background: #f0f0f0 url(accordionContainerBG.gif) repeat-y left top;
	overflow: hidden;
	font-size: 1.2em;
	width: 500px;
	clear: both;
}
.accordionContainer .block {
	padding: 20px;
	background: url(accordionContainerBottom.gif) no-repeat left bottom;
}
.accordionContainer h3 {
	font: 2.0em normal Verdana, Georgia, "Times New Roman", Times, serif;
	margin: 0 0 10px;
	padding: 0 0 5px 0;
	border-bottom: 1px dashed #ccc;
}

Adım 2. Şeklin Uygulanması

Accordion & AccordionPane

Hazırladığımız CSS kodlarımızı gerekli yerlere uyguluyarak sonuca ulaşıyoruz.

<cc1:Accordion ID="Accordion1" HeaderCssClass="accordion" HeaderSelectedCssClass="accordion active" 
     SelectedIndex="-1" runat="server" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40" 
     RequireOpenedPane="false" SuppressHeaderPostbacks="true">
     <Panes>
      <cc1:AccordionPane ID="AccordionPane1" ContentCssClass="accordionContainer" runat="server">
       <Header>Ana Başlık</Header>
        <Content>
         <div class="block">
          <h3>Alt Başlık</h3>  
		  
         </div>
        </Content>
       </cc1:AccordionPane>
      </Panes>
       .
       .
       .
</cc1:Accordion>