小米首页二级菜单栏实现原理

最新推荐文章于 2023-12-17 19:39:00 发布

BLUESKYHOST

最新推荐文章于 2023-12-17 19:39:00 发布

阅读量3.2k

点赞数 2

分类专栏：基础文章标签：小米商城pc端二级通栏菜单

本文链接：https://blog.csdn.net/BLUESKYHOST/article/details/91464991

版权

基础专栏收录该内容

34 篇文章 1 订阅

订阅专栏

小米二级菜单介绍

小米这个菜单栏跟别的二级还有所不同，她二级菜单是通栏的如果按照普通的写法肯定是写不出来的需要再此之上延申一个，就是需要控制二级菜单里通栏的哪个大盒子擦可以实现跟小米官网同样的效果我们先看效果图
效果就是这样子的具体原理最后将我把代码也发上来这个代码需要jQuery 需要你们自己引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
         margin: 0;padding: 0;  
        }
        /* 父元素 */
    .parent{
       
    }
    /* 导航栏部分 */
    .top{
        width: 1226px;
        height: 80px;
        background-color: #ff6700;
        margin: 0 auto;
    }
    /* 下面内容区域 通栏*/
    .bom{
        background-color: #c48;
        width: 100%;
        display: none;

          height: 80px;
    }
 /* 下面内容区域*/
    .content{
      
        background-color: #999999;
        height: 100%;
        width: 1226px;
        margin: 0 auto;
        
    }
    /* ul导航内容 */
    ul{
        
    }
    li{
        text-align: center;
            padding: 0 5px;
            display: inline-block;
            line-height: 80px;
         height: 100%;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="top">
            <ul class="ul">
                <li>手机</li>
                <li>飞机</li>
                <li>乐色</li>
                        <span>456</span>
            </ul>
        </div>
        <div class="bom">
            <div class="content">
                    <ul class="ss"  style="display: none">
                        <li>手机</li>
                        <li>飞机</li>
                        <li>乐色</li>
                    </ul>
                    <ul class="uls">
                        <li>第二个</li>
                        <li>第二个</li>
                        <li>第二个</li>
                    </ul>
            </div>
        </div>
    </div>
</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
     $('.ul>li').mouseover(function(){
          $('.uls').css("display", "block")
           $('.bom').css("display", "block")
     })
         $('.content').mouseover(function () {
        $('.uls').css("display", "block")
        $('.bom').css("display", "block")
    })
          $('.ul>li').mouseout(function () {
        $('.bom').css("display", "none")
    })
    // bom 这个是背景颜色粉色的哪个最大盒子
             $('.bom').mouseleave(function () {
        $('.bom').css("display", "none")
    })
    //   $('.parent').mouseover
})

</script>
</html>

BLUESKYHOST

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
小米首页二级菜单栏实现原理

小米二级菜单介绍小米这个菜单栏跟别的二级还有所不同，她二级菜单是通栏的如果按照普通的写法肯定是写不出来的需要再此之上延申一个，就是需要控制二级菜单里通栏的哪个大盒子擦可以实现跟小米官网同样的效果我们先看效果图效果就是这样子的具体原理最后将我把代码也发上来这个代码需要jQuery 需要你们自己引入<!DOCTYPE html><html lang="en">&...
复制链接

扫一扫

专栏目录