bootstrap侧边导航栏的实现

最新推荐文章于 2024-04-21 13:20:27 发布

吃鱼的羊

最新推荐文章于 2024-04-21 13:20:27 发布

阅读量2.8k

点赞数

分类专栏： CSS JS

本文链接：https://blog.csdn.net/hellojoy/article/details/107106899

版权

JS 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

https://blog.csdn.net/kebi007/article/details/76038251

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <style>
        /*-------------------------------*/
        /*           Wrappers            */
        /*-------------------------------*/
        #wrapper {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            padding-left: 0;
            transition: all 0.5s ease;
        }
        #wrapper.toggled {
            padding-left: 220px;
        }
        #wrapper.toggled #sidebar-wrapper {
            width: 220px;
        }
        #wrapper.toggled #page-content-wrapper {
            margin-right: -220px;
            position: absolute;
        }
        #sidebar-wrapper {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            background: #1a1a1a;
            height: 100%;
            left: 220px;
            margin-left: -220px;
            overflow-x: hidden;
            overflow-y: auto;
            transition: all 0.5s ease;
            width: 0;
            z-index: 1000;
        }
        #sidebar-wrapper::-webkit-scrollbar {
            display: none;
        }
        #page-content-wrapper {
        padding-top: 10px;
        width: 100%;
    }
</style>

</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    </nav>
    <div id="page-content-wrapper">
        <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">点这里</button>
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>
</div>




<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
    $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
    });
</script>
</body>
</html>

吃鱼的羊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap侧边导航栏的实现

https://blog.csdn.net/kebi007/article/details/76038251<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.
复制链接

扫一扫