
HTML:
<ul id="knowledgemenu" class="x-hidden mymenu">
<li><a id="knowledge" class="menubar">知識(shí)導(dǎo)航</a></li>
<li><a id="bbs" class="menubar">公告</a></li>
<li><a id="question" class="menubar">待解決問(wèn)題</a></li>
<li><a id="sloved" class="menubar">已解決問(wèn)題</a></li>
<li><a id="knownw" class="menubar">知識(shí)貢獻(xiàn)</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">文章庫(kù)</a></li>
<li><a id="booklist" class="menubar">圖書(shū)庫(kù)</a></li>
<li><a id="A1" class="menubar">軟件庫(kù)</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 { //鼠標(biāo)懸停上時(shí)觸發(fā)
background: #EBF3FD url(../item-over.gif) repeat-x scroll left bottom;
text-decoration: none;
}
JS:
var knowledgemenu = new Ext.Panel({
title: '翰維知道',
contentEl:'knowledgemenu', //DOM標(biāo)簽ID
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]
});