HTML+CSS+JS实现响应式顶部导航栏

最新推荐文章于 2024-05-19 09:58:49 发布

爱洋芋的土豆丶

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量2.7k

点赞数

分类专栏：前端文章标签： html5 javascript css bootstrap

本文链接：https://blog.csdn.net/weixin_45848992/article/details/119721260

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在Bootstrap的导航栏基础上做了修改，首先是使背景视频占满整个屏幕，然后初始状态时导航栏为透明色，当滚动条向下滚动一段高度后，导航栏不再透明且固定在页面顶部。

因为使用的Bootstrap框架，所以导航栏是响应式的，会根据页面大小缩小为一个图标。

下面的代码可以直接复制打开。

<!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>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        /* 取消网页默认样式 */
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        a:link {
            text-decoration: none;
        }
        a:visited {
            text-decoration: none;
        }
        a:hover {
            text-decoration: none;
        }
        a:active {
            text-decoration: none;
        }
        a:focus {
            text-decoration: none;
        }

        /* 背景视频样式 */
        video#bgvid {
            display: block;
            right: 0px;
            bottom: 0px;
            max-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;
        }

        /* 自定义的导航栏样式 */
        .my-navbar {
            padding: 40px 0 0 0;
            transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
        }
        .my-navbar a {
            background: transparent !important;
            color: #f4f4f4;
            transition: color 0.5s ease-in-out;
        }
        .my-navbar a:hover {
            color: #45bcf9 !important;
            background: transparent;
            text-decoration: none;
        }
        /* 这里的汉堡包导航图标可以换成自己的 */
        .navbar-toggler-icon {
            background-image: url("https://2021.igem.org/wiki/images/4/43/T--ECUST_China--menuIcon.png");
        }
        .navbar-brand {
            padding-left: 5vw;
        }
        .dropdown-menu {
            background-color: #09354e;
            text-align: center;
        }
        .navbar-toggler {
            background-color: #09354e !important;
        }
        .nav-item {
            padding: 0 20px;
            font-weight: 600;
        }
        .top-nav {
            padding: 10px 0;
            background: #09354e;
        }
        button.navbar-toggler {
            background-color: #fbfbfb;
        }
        button.navbar-toggler>span.icon-bar {
            background-color: #dedede
        }

        .content {
            height: 1000px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 导航栏，在bootstrap的导航栏基础上改动 -->
    <nav class="navbar navbar-expand-md fixed-top my-navbar">
        <a class="navbar-brand" href="#">LOGO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo03">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown ">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
                        data-toggle="dropdown" aria-expanded="false">
                        Dropdown1
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" href="#">Item1</a></li>
                        <li><a class="dropdown-item" href="#">Item2</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
                        data-toggle="dropdown" aria-expanded="false">
                        Dropdown2
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" href="#">Item1/a></li>
                        <li><a class="dropdown-item" href="#">Item2</a></li>
                        <li><a class="dropdown-item" href="#">Item3</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Paris</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
                        data-toggle="dropdown" aria-expanded="false">
                        Dropdown3
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" href="#">Education</a></li>
                        <li><a class="dropdown-item" href="#">Public Engagement</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
                        data-toggle="dropdown" aria-expanded="false">
                        Dropdown4
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" href="#">Medals</a></li>
                        <li><a class="dropdown-item" href="#">Poster</a></li>
                        <li><a class="dropdown-item" href="#">Awards</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 充斥全幅的背景视频，也可以改成图片，这里改成自己的视频就好 -->
    <div class="bg">
        <video autoplay loop muted id="bgvid">
            <source src="video/BG.mp4" type="video/mp4">
        </video>
    </div>
    <!-- 下面为网页内容 -->
    <div class="content"></div>
    <script>
        //滚动一段高度后，导航栏不再透明，并且吸附在页面顶部
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".fixed-top").addClass("top-nav");
            } else { $(".fixed-top").removeClass("top-nav"); }
        });
    </script>
</body>

</html>

爱洋芋的土豆丶

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS+JS实现响应式顶部导航栏

在Bootstrap的导航栏基础上做了修改，首先是使背景视频占满整个屏幕，然后初始状态时导航栏为透明色，当滚动条向下滚动一段高度后，导航栏不再透明且固定在页面顶部。因为使用的Bootstrap框架，所以导航栏是响应式的，会根据页面大小缩小为一个图标。下面的代码可以直接复制打开。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-
复制链接

扫一扫