jQury实现垂直与横向二级菜单

来源：互联网发布：数据库接口对接教程编辑：程序博客网时间：2024/05/02 00:49

第一、横向二级级级联菜单

写css代码具体实例css代码如下：

.hxdiv {
    float:left;
    margin-left:10px;
}

.hxdiv ul,.zxdiv ul{
    list-style:none;
    padding:0px;
    margin:0px;
}

.hxli{
    background-image:url("/images/1.png");
    background-repeat:repeat-x;
     width:120px;
     line-height:30PX;
     margin-right:1px;
     text-align:center;
    float:left;
}
.hxli a{
    text-decoration:none;
    color:white;
    display:block;
    display:inline-block;
    width:120px;
}
.hxli li a{
     color:black;
}
.hxli ul{
     margin:0px;
     display:none;
}
.hxli ul li{
      background:#d9d9d9;
      width:120px;

}

html文件代码：

第二、垂直二级级级联菜单

写css代码具体实例css代码如下：

.zxdiv {
     float:left;
     margin-left:100px;
     width:500px;
     min-height:200px;
     height:auto;
}

.zxli{
    background-image:url("/images/1.png");
    background-repeat:repeat-x;
     width:120px;
     line-height:30PX;
     margin-right:1px;
     text-align:center;

}
.zxli a{
    text-decoration:none;
    color:white;
    display:block;
    display:inline-block;
    width:120px;
}
.zxli li a{
     color:black;
}
.zxli ul{
     margin:0px;
     display:none;
}
.zxli ul li{
      background:#d9d9d9;
      width:120px;

}

html文件代码：

第三、建一个名为bq的js文件,具体代码如下：

$(document).ready(function(){


$('.hxli,.zxli').hover(function(){
        $(this).children("ul").slideDown();
    },function(){
        $(this).children("ul").slideUp();
    });

//或者这样写：

$('.hxli,.zxli').mouseover(function(){
        $(this).children("ul").css("display","block")
    }).mouseout(function(){
        $(this).children("ul").css("display","none")
    })

})

jQury实现垂直与横 向二级菜单

jQury实现垂直与横向二级菜单