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

最新推荐文章于 2022-11-16 13:30:56 发布

原创最新推荐文章于 2022-11-16 13:30:56 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #function #html #float #css #url

jQury 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery实现横纵向的二级菜单。通过CSS样式定义菜单布局和交互，然后用jQuery处理鼠标悬停事件，实现下拉菜单的滑动显示和隐藏。示例包括横向和垂直两种二级菜单的完整HTML、CSS和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

写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")
    })

})