js小米商城导航栏

最新推荐文章于 2024-03-10 18:07:31 发布
Hermia_yuan
最新推荐文章于 2024-03-10 18:07:31 发布
阅读量663
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/Hermia_yuan/article/details/123978833
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /* 最大的盒子 */
        .top{
            position: relative;
        }

        /* 导航栏部分 */
        .daohang{
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            /* border: 1px solid rgb(233, 233, 233); */
        }
        .daohang li {
            float: left;
            padding: 0 10px;
        }
        .daohang ::after{
             content: "";
             display: block;
             height: 0;
             clear: both;
             zoom: 1;
        }
        .daohang-ul{
            width: 605px;
            /* border: 1px solid blue; */
            margin:auto;
            display: flex;
            flex-direction: row;
        }

        .daohang-ul li:hover a{
            cursor:pointer;
            color: red;
        }

     /* 二级菜单部分 */
        .content {
            width: 100%;
            height: 0;
            overflow: hidden;
            background-color: burlywood;
            box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
        }

        .content > ul{
            width: 1226px;
            height: 229px;
            margin: 0 auto;
            background-color: lightcoral;
        }

        .content > ul >li{
            width: 204px;
            height: 229px;
            line-height: 20px;
            box-sizing: border-box;
            padding: 35px 25px 0;
            text-align: center;
            float: left;
            /* border: 1px solid greenyellow; */
        }

        .content > ul > li > a::after{
            /* position: absolute;
            left: 0;
            top: 35px;
            left: 200px; */
            margin-left: 180px;
            margin-top: -157px;
            z-index: 1;
            width: 1px;
            height: 98px;
            content: "";
            background-color: #e0e0e0;
        }
        .content > ul > li:last-child > a::after{
             height: 0;
        }
        .content ul p:nth-child(2){
            padding: 10px 0 0 0 ;
            font-size: 12px;
        }
        .content ul p:nth-child(3){
            font-size: 11px;
            color: red;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="daohang">
        <ul class="daohang-ul">
            <li><a>Xiaomi手机</a></li>
            <li><a>Redmi红米</a></li>
            <li><a>电视</a></li>
            <li><a>笔记本</a></li>
            <li><a>平板</a></li>
            <li><a>家电</a></li>
            <li><a>路由器</a></li>
            <li><a>服务</a></li>
            <li><a>社区</a></li>
        </ul>
        <div class="content">
            <ul>
                <!-- <li>
                    <a href="">
                        <img src="./imgs/li01_01.webp" alt="">
                        <p>xxxxxx</p>
                        <p>xxxxxx</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./imgs/li01_01.webp" alt="">
                        <p>xxxxxx</p>
                        <p>xxxxxx</p>
                    </a>
                </li> -->
            </ul>
        </div>
    </div>

</div>
</body>
<script>

    
   //  数组 商品信息
    var arr = [
        [{
            imgUrl: "./imgs/li01_01.webp",
            title: "Xiaomi 12 Pro",
            pic: "4699元起"
        },{
            imgUrl: "./imgs/li01_02.webp",
            title: "Xiaomi 12",
            pic: "3699元起"
        },{
            imgUrl: "./imgs/li01_03.webp",
            title: "Xiaomi 12X",
            pic: "2999元起"
        },{
            imgUrl: "./imgs/li01_04.webp",
            title: "Xiaomi 11 青春活力版",
            pic: "1899元起"
        },{
            imgUrl: "./imgs/li01_05.webp",
            title: "Xiaomi 11 青春活力版",
            pic: "1899元起"
        },{
            imgUrl: "./imgs/li01_06.webp",
            title: "Xiaomi 11 青春活力版",
            pic: "1899元起"
        }
    ],
    [{
            imgUrl: "./imgs/li01_06.webp",
            title: "Remia 12 Pro",
            pic: "4699元起"
        },{
            imgUrl: "./imgs/li01_02.webp",
            title: "Xiaomi 12",
            pic: "3699元起"
        },{
            imgUrl: "./imgs/li01_03.webp",
            title: "Xiaomi 12X",
            pic: "2999元起"
        },{
            imgUrl: "./imgs/li01_04.webp",
            title: "Xiaomi 11 青春活力版",
            pic: "1899元起"
        },{
            imgUrl: "./imgs/li01_05.webp",
            title: "Xiaomi 11 青春活力版",
            pic: "1899元起"
        },{
            imgUrl: "./imgs/li01_06.webp",
            title: "Xiaomi 11 青春活力版",
            pic: "1899元起"
        }
    ]
]

                // <li>
                //     <a href="">
                //         <img src="./imgs/li01_01.webp" alt="">
                //         <p>xxxxxx</p>
                //         <p>xxxxxx</p>
                //     </a>
                // </li>
    var daohang = document.getElementsByClassName("daohang")[0];//装导航栏的盒子 
    console.log(daohang);                                      //<div class="daohang">...</div>
    var daohangUl = document.querySelector(".daohang>ul");
    var liDaohang = daohang.getElementsByTagName("li");//导航栏的li标签 
    console.log(liDaohang);                           // [li,li,li,li,li,li,li,li,li]

    var content = daohang.getElementsByClassName("content")[0];//装下拉商品显示的ul标签的盒子content  
    console.log(content);                                      //   <div class="content">...</div>

    var liList = document.querySelector(".content>ul");//content里的的ul标签，获取这个节点是为了把创建的li添加进下拉商品显示的ul
    console.log(liList);    //<ul>...</ul>

// 封装
function create(){
    // 循环导航栏li
    for(let i=0;i<liDaohang.length;i++){
        // liDaohang[i].index=i;
        liDaohang[i].onmouseover=function(){
            liList.innerHTML = '';

            for(let j = 0;j<arr.length;j++){
                if(i == j){

                    for(const k in arr[j]){
                        var li = document.createElement("li");
                        var a = document.createElement("a");
                        var img = document.createElement("img");
                        var title = document.createElement("p");
                        var pic = document.createElement("p");

                        img.src = arr[j][k].imgUrl;
                        title.innerText = arr[j][k].title;
                        pic.innerText =arr[j][k].pic;

                        li.appendChild(a);
                        a.appendChild(img);
                        a.appendChild(title);
                        a.appendChild(pic);
                        liList.appendChild(li);
                        content.appendChild(liList);


                    }
                    
                }
            }
        }
    }
}

create();

            daohangUl.onmouseover=function(){
                content.style.height="229px";
                content.style.transition="all 1s";
                content.style.borderTop="1px solid #6e6e6e"
                }
  

           daohangUl.onmouseout=function(){
            content.style.height="0px";
            content.style.transition="all 1s";
            content.style.borderTop="none"
                }
          

    
</script>
</html>
Hermia_yuan
关注
0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js小米商城导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫