在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指定。具体大家多看看代码。
--全文完--