css侧栏

 常用到的侧栏模板。

先看看效果：

说明：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 ; }

.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 ; }