通常来讲，将一个无比长的列表直接显示给用户是一种极不礼貌的行为。对此，解决方案有很多，归类显示就是其中之一。类似我们常见的QQ或MSN

Message的联系人归类等，系统将用户管理中心的操作菜单归类显示，并应用背景图片，使得窗口的界面变得井井有条、丰富漂亮，用户也能够以最快的速度找到想要的操作项。

应用AjaxControlToolkit的Accordion控件实现此功能。实现时，首先对可折叠面板整体、头部、内容以及链接的样式进行设置，应用CSS样式表。

.accordion{

height:400px; }

.accordion

.acheader{

background-image:url('../Images/site/center.png');padding :8px;

cursor :pointer ;

margin-bottom:2px; color

:#8db9e5;}

.accordion

.accontent{ padding:0 2px 2px 20px; }

.accordion a{

text-decoration :none; color :Green ;}

然后向页面中添加Accordion控件，通过向Accordion的Panes属性中添加多个AccordionPane，实现多个导航菜单的展开与折叠，可以根据系统需要进行设置，并在CssClass、HeaderCssClass、ContenCssClass属性中分别指明相应的CSS类标签名称。AccordionPane的Header属性指定折叠面板的头部信息，Content指定展开面板时元素内部显示的内容，这里对每个操作项设置了小图标以美化界面。

ID="Accordion1" runat="server" CssClass

="accordion"

FadeTransitions ="false" HeaderCssClass ="acheader"

ContentCssClass ="accontent">

>

ID="AccordionPane1" runat="server">

>日志管理

src ="../Images/back/backli2.png"

/>  

="../WebUI/AddArticle.aspx">发表日志

/>

/>  

="../WebUI/ArtCenter.aspx">管理日志

…

运行效果如图: