常用到的侧栏模板。
先看看效果:
说明: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 >
// ==============================================================================
/* 通用左边菜单效果控制脚本(兼容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 ; }
.sidebar_second { height : 28px ; line-height : 28px ; margin-top : 1px ; }
li.sidebar_second a:link,.sidebar_second a:visited { background-position : 0px -135px ; }
#sidebar_kind .sidebar_second a:hover,#sidebar_kind .sidebar_second a:active { color : #333333 ; background-position : 0px -107px ; }
#sidebar_kind .sChosed a { background-position : 0px -107px ; color : #333333 ; }
#sidebar_kind .sDisplay { display : none ; }
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 ; }
.sidebar_second { height : 28px ; line-height : 28px ; margin-top : 1px ; }
li.sidebar_second a:link,.sidebar_second a:visited { background-position : 0px -135px ; }
#sidebar_kind .sidebar_second a:hover,#sidebar_kind .sidebar_second a:active { color : #333333 ; background-position : 0px -107px ; }
#sidebar_kind .sChosed a { background-position : 0px -107px ; color : #333333 ; }
#sidebar_kind .sDisplay { display : none ; }