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

r囧r小猫 2022-10-01 09:47 4阅读 0赞

## 小米二级菜单介绍 ##

*  小米这个菜单栏跟别的二级还有所不同，她二级菜单是通栏的如果按照普通的写法肯定是写不出来的需要再此之上延申一个，就是需要控制二级菜单里通栏的哪个大盒子擦可以实现跟小米官网同样的效果我们先看效果图  
    ![在这里插入图片描述][20190611203215377.gif]
 *  效果就是这样子的具体原理最后将我把代码也发上来这个代码需要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>

[20190611203215377.gif]: /images/20220118/c42e859360ac443b89c75b8180f2bc01.png