web前端-二级分类菜单（类似购物网站）

最新推荐文章于 2024-06-26 00:08:01 发布

辣姐什么鬼

最新推荐文章于 2024-06-26 00:08:01 发布

阅读量6.4k

点赞数

分类专栏： web前端文章标签： web前端

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果：鼠标移上去右边显示二级菜单。

效果图：

实现代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #nav{
            width:100%;
            height:420px;
            background-color:lightgrey;
        }
        #nav1{
            height:420px;
            width:1200px;
            background-color:lightblue;
            margin:0 auto;
        }
        #nav1 .menu{
            width:190px;
            height:420px;
            background:black;
            float:left;
        }
        #nav1 .flash{
            width:820px;
            height:420px;
            background:palevioletred;
            float:left;
        }
        #nav1 .news{
            width:190px;
            height:420px;
            background:greenyellow;
            float:left;
        }
        #nav1 .menu ul li{
            list-style-type:none;
            width:190px;
            height:69px;
            border-bottom:1px solid #1e1e1d;
            color:whitesmoke;
            text-indent:20px;
            position:relative;
        }
        #nav1 .menu ul li p{
            font-size:14px;
            color:whitesmoke;
        }
        /*构建二级菜单*/
        .menu ul li .more{
            width:300px;
            height:400px;
            background:black;
            position:absolute;
            left:189px;
            border:1px solid gray;
            display:none;
        }
        .menu ul li .border_top{
            height:1px;
            background:gray;
            width:190px;
            position:absolute;
            top:-1px;
            display:none;
        }
        .menu ul li .border_bottom{
            height:1px;
            background:gray;
            width:190px;
            position:absolute;
            bottom:-1px;
            display:none;
        }
        .menu ul li .border_right{
            height:70px;
            background:black;
            width:1px;
            position:absolute;
            right:0px;
            bottom:-1px;
            display:none;
        }
        #nav1 .menu ul li.hover .more{
            display:block;
        }
        #nav1 .menu ul li.hover .border_top{
            display:block;
        }
        #nav1 .menu ul li.hover .border_bottom{
            display:block;
        }
        #nav1 .menu ul li.hover .border_right{
            display:block;
        }

    </style>
</head>
<body>
<div id="nav">
    <div id="nav1">
        <div class="menu">
            <ul>
                <li>
                    <div class="more"></div>
                    <div class="border_top"></div>
                    <div class="border_bottom"></div>
                    <div class="border_right"></div>
                </li>
                <li>
                    <div class="more"></div>
                    <div class="border_top"></div>
                    <div class="border_bottom"></div>
                    <div class="border_right"></div>
                </li>
                <li>
                    <div class="more"></div>
                    <div class="border_top"></div>
                    <div class="border_bottom"></div>
                    <div class="border_right"></div>
                </li>
                <li>
                    <div class="more"></div>
                    <div class="border_top"></div>
                    <div class="border_bottom"></div>
                    <div class="border_right"></div>
                </li>
                <li>
                    <div class="more"></div>
                    <div class="border_top"></div>
                    <div class="border_bottom"></div>
                    <div class="border_right"></div>
                </li>
                <li>
                    <div class="more"></div>
                    <div class="border_top"></div>
                    <div class="border_bottom"></div>
                    <div class="border_right"></div>
                </li>
            </ul>
        </div>
        <div class="flash"></div>
        <div class="news"></div>
    </div>
</div>
<script src="jquery-2.1.0.min.js"></script>
<script>
    $(".menu ul li").hover(function(){
        var index=$(this).index();
        //鼠标移上去
        var top=$(this).position().top;//得到当前li到顶部的距离
        var height1=$(this).find(".more").height();//得到more盒子的高度
        var height=height1/3;
        //当top比当前盒子高度三分之一还大
        if(top>height){
            if(index==5){
                $(this).find(".more").css("bottom","-1px");
                $(this).addClass("hover");
            }else{
               $(this).find(".more").css("top","-"+height+"px");
                $(this).addClass("hover");
            }
        }else{
            $(this).find(".more").css("top","-1px");
            $(this).addClass("hover");
        }
    },function(){
        //鼠标移开
        $(this).removeClass("hover");
    });
</script>
</body>
</html>