用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

一个很精简的js二级导航栏

2023-03-03 作者: js特效举报

[javascript]代码库

<!DOCTYPE html>
<html>
<head>
    <title>
        一个很精简的js二级导航栏
    </title>
    <style type="text/css">


        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline-block;
            position: relative;
        }

        nav ul li a {
            color: #333;
            display: block;
            padding: 10px 20px;
            text-decoration: none;
        }

        nav ul li ul {
            background-color: #fff;
            border: 1px solid #ccc;
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 999;
            padding: 10px;
        }

        nav ul li:hover ul {
            display: block;
        }

        nav ul li ul li {
            display: block;
            margin: 10px 0;
        }

        nav ul li ul li a {
            display: block;
            padding: 5px 0;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About us</a>
            <ul>
                <li>
                    <a href="#">Our team</a>
                </li>
                <li>
                    <a href="#">Our history</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Portfolio</a>
        </li>
        <li>
            <a href="#">Contact us</a>
        </li>
    </ul>
</nav>
<script type="text/javascript">
    // 获取所有有下拉菜单的导航栏元素
    var navItems = document.querySelectorAll('nav ul li');

    // 遍历导航栏元素
    for (var i = 0; i < navItems.length; i++) {
        var navItem = navItems[i];
        var subMenu = navItem.querySelector('ul');

        // 如果当前导航栏元素有下拉菜单
        if (subMenu) {
            // 为导航栏元素添加可收缩的事件监听器
            navItem.addEventListener('click', function (event) {
                event.preventDefault();
                subMenu.classList.toggle('active');
            });
        }
    }
</script>
</body>
</html>



[代码运行效果截图]


一个很精简的js二级导航栏


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...