二级菜单

yang 发布于 2023-5-30 19:24 阅读：331 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>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            a {
                text-decoration: none;
                color: #000;
            }

            #container {
                margin: 100px auto;
                width: 1000px;
                height: 600px;
            }

            #list {
                position: relative;
                width: 200px;
                height: 600px;
                background-color: #f3f3f3;
                border-top: 2px solid #fd9b5a;
            }

            #list li {
                /* box-sizing: border-box;
                float: left;
                width: 100%; */
                /* 0.原来li的样式就不需要了，加个高度就可以 */
                height: 40px;
            }

            #list li a {
                /* 1.脱离文档流 */
                position: absolute;
                /* 2.改a的display属性 */
                display: block;
                box-sizing: border-box;
                padding: 8px 16px;
                /* 3.给a设置宽度 */
                width: 202px;
                /* 4.通过控制层级压住右侧的内容 */
                z-index: 9;
            }

            /* 5.让hover效果加到a身上 */
            #list li a:hover {
                cursor: pointer;
                /* background-color: #fff;
                border: 1px solid #fd9b5a;
                border-right: 1px solid #fff; */
            }

            /* 交集样式 既要满足前面的修饰，又要满足后面的修饰 */
            #list li a.active {
                background-color: #fff;
                border: 1px solid #fd9b5a;
                border-right: 1px solid #fff;
            }

            #list li div {
                display: none;
                position: absolute;
                left: 200px;
                top: 0;
                width: 800px;
                height: 600px;
                border: 1px solid #fd9b5a;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <ul id="list">
                <li>
                    <a href="#">电脑数码</a>
                    <div>
                        电脑数码电脑数码电脑数码电脑数码电脑数码电脑数码
                        电脑数码电脑数码电脑数码电脑数码电脑数码电脑数码
                        电脑数码电脑数码电脑数码电脑数码电脑数码
                    </div>
                </li>
                <li>
                    <a class="active" href="#">服装</a>
                    <div>
                        服装服装服装服装服装服装服装服装服装
                        服装服装服装服装服装服装服装服装服装
                    </div>
                </li>
                <li>
                    <a href="#">饮食零食</a>
                    <div>
                        饮食零食饮食零食饮食零食饮食零食饮食零食
                        饮食零食饮食零食饮食零食饮食零食饮食零食
                        饮食零食饮食零食饮食零食饮食零食饮食零食
                    </div>
                </li>
                <li>
                    <a href="#">首饰金链子</a>
                    <div>
                        首饰金链子首饰金链子首饰金链子首饰金链子首饰金链子首饰金链子
                        首饰金链子首饰金链子首饰金链子首饰金链子
                    </div>
                </li>
            </ul>
        </div>
        <script>
            // 功能一：移入左侧菜单栏标题，右侧内容对应显示
            // 1.获取相关节点
            const liNodes = document.querySelectorAll("li");
            // 2.给li绑定移入、移出事件
            liNodes.forEach(function (v) {
                v.addEventListener("mouseover", function () {
                    // 3-1.移入li时，让其中内容div显示
                    v.lastElementChild.style.display = "block";
                    // 3-2.给a标签增加激活样式
                    v.firstElementChild.className = "active";
                });
                // 4.移出li的时候，让其中内容隐藏
                v.addEventListener("mouseout", function () {
                    // 4-1.移出li时，让对应div隐藏
                    v.lastElementChild.style.display = "none";
                    // 4-2.给a标签删除激活样式
                    v.firstElementChild.className = "";
                });
            });
        </script>
    </body>
</html>
二级菜单V
扫描二维码，在手机上阅读