Bootstrap移动端导航（简易）

最新推荐文章于 2024-05-14 09:55:02 发布

ikun_rapper

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量8.6k

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/weixin_44681697/article/details/99742224

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果在线查看

在这里插入图片描述

代码少，都在HTML里

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .open-navbar {
            transition: all .5s ease!important;
            transform: translateX(0)!important
        }

        .open-btn {
            right: -20%!important;
        }

        .open-icon {
            background: url('open.svg') no-repeat center!important;
            background-size: 100%;
        }

        .shadow::before {
            position: absolute;
            display: block;
            content: '';
            left: 0;
            right: 0;
            height: 100%;
            background: rgba(6, 12, 34, 0.7)!important;
            transition: all .3s ease-in;
        }

        @media screen and (max-width: 768px){
            body {
                background: url('http://222.186.12.239:10010/hgqztp_170428/009.jpg') no-repeat left center;
                background-size: 110%;
            }

            .navbar {
                background: rgba(6, 12, 34, 0.9)!important;
                transition: all .5s ease;
                transform: translateX(-100%);
                width: 80%;
            }

            .navbar-light .navbar-toggler {
                border: none;
                position: fixed;
                top: 1.5%;
                right: -16%;
            }

            .navbar-light .navbar-toggler:focus {
                outline: none;
            }

            .collapse:not(.show) {
                display: block;
                height: 100vh;
            }

            .navbar-light .navbar-toggler-icon {
                transition: all .5s ease;
                background: url('close.svg') no-repeat center;
                background-size: 100%;
            }

            .navbar-light .navbar-nav .nav-link {
                color: #fff!important
            }

        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img src="logo.svg" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <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">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Dropdown link
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        $(".navbar-light .navbar-toggler").click(function(){
            $("body").toggleClass("shadow")
            $(".navbar-light .navbar-toggler").toggleClass("open-btn")
            $(".navbar-light .navbar-toggler-icon").toggleClass("open-icon")
            $(".navbar").toggleClass("open-navbar")
        })
    </script>
</body>

</html>