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