HTML:
<ul id="knowledgemenu " class="x-hidden mymenu" (这里的class用来隐藏面板内容的)>
<li><a id="knowledge" class="menubar ">知识导航</a></li>
<li><a id="bbs" class="menubar">公告</a></li>
<li><a id="question" class="menubar">待解决问题</a></li>
<li><a id="sloved" class="menubar">已解决问题</a></li>
<li><a id="knownw" class="menubar">知识贡献</a></li>
<li><a id="tagslist" class="menubar">Tags</a></li>
</ul>
<ul id="libmenu " class="x-hidden mymenu">
<li><a id="knownlist" class="menubar ">文章库</a></li>
<li><a id="booklist" class="menubar">图书库</a></li>
<li><a id="A1" class="menubar">软件库</a></li>
</ul>
CSS:
.menubar {
border-bottom: 1px solid #AACCF6;
color: #222222;
cursor: pointer;
display: block;
height: 20px;
width: 50px;
line-height: 17px;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: 0;
padding: 3px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.menubar:hover { //鼠标悬停上时触发
background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
text-decoration: none;
}
JS:
var knowledgemenu = new Ext.Panel({
title: '翰维知道',
contentEl:'knowledgemenu', //DOM标签ID (contentEL可以换成html)
border:false,
iconCls:'nav'
});
var libmenu = new Ext.Panel({
title: '专题',
contentEl:'libmenu',
border:false,
iconCls:'nav'
});
var westPanel=new Ext.Panel({
region:'west',
el:'west',
title:'功能菜单',
collapsible: true , //本窗口伸缩
//collapseMode:'mini',
split:true,
width: 175,
minSize: 175,
maxSize: 175,
margins:{left: 10, top: 0, right: 0, bottom: 0},
layout:'accordion', //子窗口为折叠
layoutConfig:{
animate:true
// fill :false
},
items:[knowledgemenu, libmenu]
});
http://www.blogjava.net/algz/articles/278217.html