导航栏

最新推荐文章于 2021-08-04 08:44:43 发布

原创最新推荐文章于 2021-08-04 08:44:43 发布 · 置顶 · 270 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#导航栏

网页导航栏

网页展示：

网页展示

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {padding: 0;margin: 0}
        #d {width: 100%;height: 50px;background-color: #2B2B2B;min-width: 1000px}
        #u {margin-left: 200px}
        #d li {cursor: pointer;width: 120px;height: 50px;background-color: deepskyblue;margin-left: 20px;background-color: #2B2B2B;color: white;display: inline-block;text-align: center;line-height: 50px}
        #d li:hover {color: white;background-color: #02B2B5}
        #d li:last-child:hover::before {display: block}
        #d li:last-child:hover a {display: block}
        #d li:last-child {position: relative}
        /*选项卡下拉实现*/
        #d li:last-child::before {display: none;content: "";width: 0;height: 0;border: 10px solid transparent;border-bottom: 10px solid #02B2B5;position: absolute;top: 40px;left: 50px}
        #d li:last-child a {text-decoration: none;color: white;display: none;width: 120px;height: 40px;background-color: #02B2B5;text-align: center;line-height: 40px;position: absolute;top: 60px;left: 0px}
        .a {background-color: #02B2B5 !important}
    </style>
</head>
<body>
<div id="d">
    <ul id="u">
        <li class="a">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5<a href="http://www.baidu.com">百度</a></li>
    </ul>
</div>
<script>
    // 选项卡点击功能实现
    var oli = document.querySelectorAll("#u li");
    for (let i = 0; i < oli.length; i++) {
        oli[i].addEventListener("click", function () {
            for (var j = 0; j < oli.length; j++) {
                oli[j].className = ""
            }
            this.className = "a";
        })
    }
</script>
</body>
</html>

全部代码作于2019年-9月-21日