JQuery实现菜单下拉

最新推荐文章于 2024-08-05 22:46:57 发布

极乐码农

最新推荐文章于 2024-08-05 22:46:57 发布

阅读量511

点赞数

分类专栏：前端(JQuery+JS+H5+CSS) 文章标签： css jquery html javascript

本文链接：https://blog.csdn.net/weixin_43216437/article/details/108831894

版权

前端(JQuery+JS+H5+CSS) 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery实现菜单下拉

htmL代码
CSS代码

网站导航栏有下拉菜单，但是下拉菜单出现后会把下面的内容顶下去，
解决方法：是在下拉菜单层设置css:position:absolute;z-index:999;

position:absolute:绝对定位，和上下文无关。**

htmL代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击下拉</title>
    <link rel="stylesheet" href="../css/test.css">
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".navItem").hover(function () {
                let totalLength=$(this).find(".childrenItem").length;
                totalLength=totalLength*25;
                $(this).find(".navChildren").stop();
                $(this).find(".navChildren").animate({height:totalLength+"px"},500,"linear",function () {

                })
            },
                function (){
                    $(this).find(".navChildren").stop();
                    $(this).find(".navChildren").animate({height: "0px"},1000,"linear",function () {

                    })
                })
            $(".childrenItem").hover(function () {
                $(this).css("color","red")
            },
                function (){
                $(this).css("color","black")
                })
        })
    </script>
</head>
<body>
<div class="navPanel">
    <div class="navItem">
        <a href="#" class="navTitle">电影片</a>
        <div class="navChildren">
            <a href="#"><div class="childrenItem">动作片</div></a>
            <a href="#"><div class="childrenItem">喜剧片</div></a>
            <a href="#"><div class="childrenItem">爱情片</div></a>
            <a href="#"><div class="childrenItem">科幻片</div></a>
            <a href="#"><div class="childrenItem">恐怖片</div></a>
            <a href="#"><div class="childrenItem">剧情片</div></a>
            <a href="#"><div class="childrenItem">战争片</div></a>
            <a href="#"><div class="childrenItem">说电影</div></a>
        </div>
    </div>

    <div class="navItem">
        <a href="#" class="navTitle">连续剧</a>
        <div class="navChildren">
            <a href="#"><div class="childrenItem">国产剧</div></a>
            <a href="#"><div class="childrenItem">港台剧</div></a>
            <a href="#"><div class="childrenItem">日韩剧</div></a>
            <a href="#"><div class="childrenItem">欧美剧</div></a>
        </div>
    </div>

    <div class="navItem">
        <a href="#" class="navTitle">综艺片</a>
        <div class="navChildren">
            <a href="#"><div class="childrenItem">内地综</div></a>
            <a href="#"><div class="childrenItem">港台综</div></a>
            <a href="#"><div class="childrenItem">日韩综</div></a>
            <a href="#"><div class="childrenItem">欧美综</div></a>
        </div>
    </div>

    <div class="navItem">
        <a href="#" class="navTitle">动漫片</a>
        <div class="navChildren">
            <a href="#"><div class="childrenItem">国产动</div></a>
            <a href="#"><div class="childrenItem">日韩动</div></a>
            <a href="#"><div class="childrenItem">欧美动</div></a>
            <a href="#"><div class="childrenItem">港台动</div></a>
            <a href="#"><div class="childrenItem">海外动</div></a>
        </div>
    </div>
</div>
</body>
</html>

CSS代码

div{
    margin: 0;
    padding: 0;
}
p{
    margin: 0;
    padding: 0;
}
.navPanel{
    width: 100%;
    height: 150px;
}
.navItem{
    width: 100px;
    float: left;
    text-align: center;
}
.navTitle{
    color: #7d75f9;
    text-align: center;
    font-size: 30px;
    height: 40px;
    width: 100px;
}
.navChildren{
    width: 100%;
    overflow: hidden;
    height: 0;
}
.navItem  a{
    list-style: none;
    text-decoration: none;
}

极乐码农

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现菜单下拉

JQuery实现菜单下拉htmL代码CSS代码htmL代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击下拉</title> <link rel="stylesheet" href="../css/test.css"> <script type="text/javascript" src
复制链接

扫一扫

专栏目录