天猫首页悬浮层制作原理

悬浮层效果图：

布局设计思路：

　　右边的树形导航菜单使用一个ul囊括，在每个li中放入一个span标签用来存放导航信息，再放入一个div用来当作需要显示的悬浮层

　　如:

　　　　

<ul>
       <li>
         <span>平板电视</span>
         <div class="submenu">
             悬浮层中需要展示的内容
         </div>
      </li>
</ul>

实现悬浮层有两种方法：

　　1、纯css模式：

　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/悬浮层.css" />
    </head>
    <body>
        <ul>
            <li>
                <span>平板电视</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>            
            <li>
                <span>电脑</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>
            <li>
                <span>手机</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>
            <li>
                <span>洗衣机</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>
        </ul>
    </body>
</html>
ul{
    width:150px;
    background: #DDDDDD;
    padding:0px;
}

ul li{
    list-style-type: none;
    height:30px;
}
ul li span{
    display: block;
    line-height: 30px;    
    text-align: center;
}
.submenu{
    display: none;/*将悬浮层隐藏*/
    position: absolute;/*使用绝对定位的left和top属性将该盒子定位再导航栏附近*/
    left:158px;
    top:15px;
    height:125px;
    width:400px;
    background: pink;
    z-index: 4;/*设置该层的优先级指数，越大优先级越大*/
}
.submenu span{
    display: block;/*悬浮层中的内容，优先级设置要比底层盒子高避免被覆盖*/
    z-index: 6;
    color: #313131;
    border-bottom: 1px solid #CCCCCC;
}
ul li:hover{
    background: #FFFFFF;/*当鼠标移动到li标签区域时触发事件，并启用其下面设置的属性*/
}
ul li:hover .submenu{/*当鼠标移动到li标签区域时触发事件，并启用其.submenu下面设置的属性,将悬浮层显示出来*/
    display: block;
}

2、使用js+css实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/悬浮层.css" />
        <script type="text/javascript">
            window.onload = function(){//指定在页面加载时加载下面函数的 内容
                var list = document.getElementsByTagName("li");//根据hmtl标签名获取对应的对象，并返回一个数组
                for(i=0;i<list.length;i++){//循环每个对象并给每个对象设置鼠标事件
                    list[i].onmouseover = function(){//当鼠标移动到li区域上时执行
                        this.className = "lihover";//将li的class属性设置为lihover
                    }
                    list[i].onmouseout = function(){//鼠标移出
                        this.className ="";//将li的class属性设置为空
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <span>平板电视</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>            
            <li>
                <span>电脑</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>
            <li>
                <span>手机</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>
            <li>
                <span>洗衣机</span>
                <div class="submenu">
                    <span>平板电视</span>
                    <span>平板电视</span>
                    <span>平板电视</span>
                </div>
            </li>
        </ul>
    </body>
</html>
ul{
    width:150px;
    background: #DDDDDD;
    padding:0px;
}

ul li{
    list-style-type: none;
    height:30px;
}
ul li span{
    display: block;
    line-height: 30px;    
    text-align: center;
}
.submenu{
    display: none;/*将悬浮层隐藏*/
    position: absolute;/*使用绝对定位的left和top属性将该盒子定位再导航栏附近*/
    left:158px;
    top:15px;
    height:125px;
    width:400px;
    background: pink;
    z-index: 4;/*设置该层的优先级指数，越大优先级越大*/
}
.submenu span{
    display: block;/*悬浮层中的内容，优先级设置要比底层盒子高避免被覆盖*/
    z-index: 6;
    color: #313131;
    border-bottom: 1px solid #CCCCCC;
}
ul .lihover{
    background: #FFFFFF;
}
ul .lihover .submenu{
    display: block;
}

具体实现看：http://how2j.cn/k/tmall-front/tmall-front-821/821.html?p=47048

 

posted on 2018-06-25 10:16 北宫乾宇 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为myfaith-feng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/myfaith-feng/p/9223070.html