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