在ProjectManager中，由于用戶需要進行的操作較多，于是采用了主菜單和次級菜單的形式來擴大菜單容量。但新問題是用戶不容易記住當前所處的位置，對于新手尤其是這樣，因此，在主菜單和次級菜單上把當前位置標出是對用戶有所幫助的，具體形式如下圖所示：
具體怎么做到這一點呢？使用JS分別把主菜單和次級菜單的當前項更換一個類別就可以，首先我們看看兩個菜單css定義：
#menubar{
width: 950px;
height: 30px;
margin-left:auto;
margin-right:auto;
}
#menubar ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#menubar li{
float:left;
display:block;
height:30px;
line-height:30px;
}
#menubar li.leftBlank{
width:235px;
text-align:left;
font-size:20px;
color:#000000;
}
#menubar li.rightBlank{
width:235px;
text-align:right;
}
#menubar li a{
width:96px;
font-size:16px;
color:#404040;
text-decoration:none;
text-align:center;
background:#ffffff url(../img/manubar.gif) 0px 0px;
}
#menubar li a.current{
width:96px;
color:#ffffff;
font-weight:bold;
background:#ffffff url(../img/manubar.gif) 0px -49px;
border:0px;
}
#submenubar{
width: 950px;
height: 31px;
margin-left:auto;
margin-right:auto;
background:#000000 url(../img/submanubar.gif) 0px -1px repeat-x;
border-left:1px #ff7101 solid;
border-right:1px #ff7101 solid;
}
#submenubar ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#submenubar li{
float:left;
height:31px;
line-height:31px;
}
#submenubar li a{
padding-left:20px;
font-size:12px;
color:#ffffff;
text-decoration:none;
text-align:center;
}
#submenubar li a.current{
color:#c20002;
font-weight:bold;
}
#submenubar li a:hover{
text-decoration:underline;
}
上面加粗的部分，就是我們要用JS賦給當前菜單項的，這就比較簡單了，找出來修改className即可，代碼如下：
/*****************************************************
* 設置頂級菜單中當前頁所處的位置
*****************************************************/
function setCurrentMenu(menuNumber){
// 設置主菜單
var manubar=$("menubar");
var menu=manubar.childNodes[2].childNodes[menuNumber].firstChild;
menu.className="current";
}
/*****************************************************
* 設置次級菜單中當前頁所處的位置
*****************************************************/
function setCurrentSubMenu(menuNumber){
// 設置次級菜單
var manubar=$("submenubar");
var menu=manubar.childNodes[2].childNodes[menuNumber].firstChild;
menu.className="current";
}
其后，在頁面的窗體載入事件中調用這兩個函數即可，指定menuNumber即可指定當前菜單項。userMenuIntroBody.jsp中示例調用如下：
<script language="javascript">
<!--
/*****************************************************
* 窗口載入時調用的啟動函數
*****************************************************/
window.onload=function(){
// 設置當前頁在主菜單和次級菜單中的位置
setCurrentMenu(1);
setCurrentSubMenu(5);
// 隱藏邊欄，加寬內容欄，使得內容如同全屏一樣
makeConceptFullScreen();
}
//-->
</script>
這樣，就做到了是第一個主菜單，第五個次級菜單變成當前項，分別用黃色條紋圖片背景和紅色加粗字體標識出來。
有兩點需要贅述一下，一是主菜單的第一項是第二個li節點，第一個是左空白，而次級菜單的第一項是第一個li節點；二是原始的菜單項都是沒有指定current類別的，都是在具體頁面中用JS指定。具體大家多看看代碼。
--全文完--