常用到的侧栏模板。
先看看效果：
说明：2级栏目，状态有三种，选中，鼠标滑过，默认。
sidebar.jsp
<script language="javascript">//==============================================================================
/* 通用左边菜单效果控制脚本(兼容firfox)
建档时间：2007-4-24
最后修改时间：2007-4-24
作者：陈满森
说明：
1.num_father--表示当前父级编号、num_son--表示当前子级编号
*///==============================================================================
function Chose_sidebar(obj,num_son,num_father,url){
var temp = "fNum="+num_father+"&sNum="+num_son;
if(url.indexOf("?")>0){
obj.href = url+"&"+temp;
}else{
obj.href = url+"?"+temp;
}
}
</script>
<%
/*------------------------------
说明：
左边栏目参数：
sFnum-->父级编号
sSnum-->次级编号
-------------------------------*/
String sFnum = (request.getParameter("fNum")==null)?"":request.getParameter("fNum");
String sSnum = (request.getParameter("sNum")==null)?"":request.getParameter("sNum");
if(sFnum.equals("0")){
sFnum = sSnum;
sSnum = "_01";
}//判断只点击父级栏目的时候，默认给第一个小类的页面给用户看
int sizeForFather = 2;
String[][] array_menu = {
//父级目录：
{"1","0","管理员功能要求","../message/index.jsp"},
{"2","0","个人功能要求","../message/index.jsp"},
//次级目录：
{"_01","1","公告管理","../message/index.jsp"},
{"_02","1","信息管理","../message/index.jsp"},
{"_03","1","教育管理","../message/index.jsp"},
{"_04","1","考核管理","../message/index.jsp"},
{"_05","1","咨询管理","../message/index.jsp"},
{"_06","1","管理员权限管理","../message/index.jsp"},
{"_01","2","公告咨询","../message/index.jsp"},
{"_02","2","信息咨询","../message/index.jsp"},
{"_03","2","健康教育学习","../message/index.jsp"},
{"_04","2","健康教育测试","../message/index.jsp"},
{"_05","2","健康咨询","../message/index.jsp"},
{"_06","2","健康档案查询","../message/index.jsp"}
};
%>
<ul id="sidebar_kind">
<%
boolean flag_chosed_f = false; //一级菜单选中开关
boolean flag_chosed_s = false; //子菜单选中开关
for(int i=0; i<array_menu.length; i++){
if(!array_menu[i][1].equals("0")) continue;
if(sSnum.equals(array_menu[i][0]) || sFnum.equals(array_menu[i][0])) flag_chosed_f = true;
else flag_chosed_f = false;
%>
<li class="sidebar_first <%if(flag_chosed_f){%>fChosed<%}%>"><a href="javascript：fvoid()" onclick="Chose_sidebar(this,'<%=array_menu[i][0]%>','<%=array_menu[i][1]%>','<%=array_menu[i][3]%>');" title="<%=array_menu[i][2]%>"><%=array_menu[i][2]%></a></li>
<%
for(int j=0; j<array_menu.length;j++){
flag_chosed_s = false;
if(!array_menu[i][0].equals(array_menu[j][1])) continue;
if(sSnum.equals(array_menu[j][0])) flag_chosed_s = true;
%>
<li class="sidebar_second <%if(flag_chosed_s){%>sChosed<%}%> <%if(!flag_chosed_f){%>sDisplay<%}%>"><a href="javascript：fvoid()" onclick="Chose_sidebar(this,'<%=array_menu[j][0]%>','<%=array_menu[j][1]%>','<%=array_menu[j][3]%>');" title="<%=array_menu[j][2]%>"><%=array_menu[j][2]%></a></li>
<%
}
}
%>
</ul>
样色部分：
/*SIDEBAR --------------------- */
#sidebar_kind{width:182px;list-style-type:none; margin:0 0 0 5px; padding:0; text-align:center; font-weight:bold;}
#sidebar_kind a{
display:block;text-align:center;background-image:url(../image/sidebar.gif);background-repeat: no-repeat;
width:75%;padding-left:50px;color: #999999;cursor:hand;text-decoration: none;
}
.sidebar_first{height:53px;line-height:54px;margin-top:2px; font-size:14px;}
li.sidebar_first a:link,.sidebar_first a:visited{background-position: 0px -53px;}
#sidebar_kind .sidebar_first a:hover,#sidebar_kind .sidebar_first a:active{color:#FFFFFF;background-position: 0px 0px;}
#sidebar_kind .fChosed a{background-position: 0px 0px; color:#FFFFFF;}
