HTML炫酷二级菜单——Html案例

最新推荐文章于 2024-08-25 19:34:22 发布

StudiousTiger

最新推荐文章于 2024-08-25 19:34:22 发布

阅读量651

点赞数 1

文章标签： css html html5 css3 javascript

本文链接：https://blog.csdn.net/m0_45067620/article/details/107074620

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

用到了html、css、js
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .main {
            width: 200px;
            margin: 30px auto;
            overflow: hidden;
        }
        .nav {
            width: 100%;
            height: 40px;
            overflow: hidden;
            transition: 0.3s;
        }
        .main .nav:nth-child(1) .title{
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .title {
            display: block;
            height: 40px;
            width: 100%;
            line-height: 40px;
            text-align: center;
            background-image: linear-gradient(0, rgb(54, 54, 54), rgb(105, 105, 105));
        }

        .nav div {
            width: 100%;
            height: 40px;
            background-color: yellowgreen;
            line-height: 40px;
            text-align: center;
        }

        .nav div:hover {
            background-color: tomato;
        }
    </style>
    <script>
        window.onload = function () {
            var title = document.getElementsByClassName("title");
            var nav = document.getElementsByClassName("nav");
            dop(0);
            dop(1);
            dop(2);
            dop(3);
            // 写一个函数，用于二级菜单显示
            // m为下标
            function dop(index) {
                title[index].onclick = function () {
                    // 清除其他已经展开的下拉栏
                    for (var i = 0; i < title.length; i++) {
                        // 通过getComputedStyle(obj,false).样式  获取obj当前显示的样式
                        if (getComputedStyle(nav[i], false).height != "40px") {
                            nav[i].style.height = "40px";
                        }
                    }
                    // getComputedStyle获取到元素当前的样式
                    if (getComputedStyle(nav[index], false).height == "40px") {
                        nav[index].style.height = (nav[index].children.length - 1) * 40 + "px";
                    } else {
                        nav[index].style.height = "40px";
                    }
                }
            }
        };
    </script>
</head>

<body>
    <div class="main">
        <div class="nav">
            <span class="title">1</span>
            <div>123</div>
            <div>456</div>
            <div>789</div>
            <div>741</div>
            <div>852</div>
        </div>
        <div class="nav">
            <span class="title">2</span>
            <div>321</div>
            <div>654</div>
            <div>987</div>
        </div>
        <div class="nav">
            <span class="title">3</span>
            <div>741</div>
            <div>852</div>
            <div>963</div>
            <div>369</div>
        </div>
        <div class="nav">
            <span class="title">4</span>
            <div>789</div>
            <div>456</div>
            <div>123</div>
            <div>410</div>
        </div>
    </div>
</body>

</html>