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<%}%>"><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<%}%>"><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;}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值