使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。[通俗易懂]

全栈程序员-站长 • 2022年4月21日下午12:40 • 未分类 • 阅读 43

大家好，又见面了，我是你们的朋友全栈君。

这个记录算是这段时间的一个总结吧。折腾了页面样式果然让人反复纠结。

思路概要：

使用.body-small，代表屏幕处于小分辨率下。用JQ的resize()方法监听。并在<body>处增加或删除。
使用.mini-sidebar，代表侧边栏处于收缩状态下。（ .body-small 和 .mini-sidebar同时存在时，代表小分辨率下菜单收缩）
开始干活，根据<body>标签的class类，编写每个状态下对应的CSS样式。

HTML：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendors/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/vendors/animate/animate.css" rel="stylesheet">
    <link href="/static/vendors/metismenu/dist/metisMenu.min.css" rel="stylesheet">
    <link href="/static/assets/home/test_css.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="//fanyi.bdstatic.com/static/translation/img/favicon/favicon_d87cd2a.ico">
</head>
<body>
    <div class="container-fluid p-0 m-0 h-100">
        <nav id="home_sidebar" class="">
            <div class="sidebar-wrapper">

            </div>
        </nav>
        <div id="home_body" class="">
            <div id="home_header" class=""><i class="fa fa-indent" id="sidebarToggle">侧边栏开关</i></div>
            <div id="home_content" class="">
                home_content
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                home_content
            </div>
            <div id="home_footer" class="">home_footer</div>
        </div>
    </div>

    <script src="/static/vendors/jquery/dist/jquery.min.js"></script>
    <script src="/static/vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/vendors/metismenu/dist/metisMenu.min.js"></script>
    <script src="/static/vendors/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/static/assets/home/test_js.js"></script>

</body>
</html>

JavaScript:

var test_html = function (){

    function BeautifyMenu() {
        /**
         * 侧边栏展开美化效果。
         * 展开菜单时，延迟显示侧边栏。
         * 否则侧边栏错位情况严重
         * */
        $('#home_sidebar>div').hide();
        setTimeout(
            function () {
                $('#home_sidebar>div').fadeIn(400);
            }, 100);
    }

    var initSidebarToggle = function () {
        /**
         * 侧边栏收缩切换器
         * */
        $("#sidebarToggle").click(function (e) {
            //动画效果 animate 有空再添加。
            e.preventDefault();
            $("body").toggleClass("mini-sidebar");
            BeautifyMenu();
        })
    };

    var initResizeWindows = function () {
        /**
         * 初始化页面样式
         * 注册resize监听，判断浏览器宽度，调整页面样式。
         * */
        $(window).resize(function () {
            if ($(window).width() < 769) {
                $('body').addClass('body-small mini-sidebar');
            } else {
                $('body').removeClass('body-small');
            }
        });
        $(window).resize();
    };

    return {
        init:function () {
            initSidebarToggle();
            initResizeWindows();
        }
    }
}();

$(document).ready(function () {
    test_html.init();

});

CSS:

html,body{margin:0;padding:0;height:100%}
body{font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;background-color: #2f4050;color: #676a6c;overflow-x: hidden;}

/* 页面起始布局（宽屏时） */
#home_sidebar,#home_body,#home_header,#home_footer,#sidebar_menu>li.mm-active,.sidebar-header{ -webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;}
#home_header{width:100%;background-color: #f3f3f4;position:fixed;height: 50px;line-height: 50px;border-bottom:1px solid #e7eaec;}
#home_sidebar{width:220px;position:fixed;height:100%;overflow-x: hidden;}
#home_body{margin-left: 220px;height:100%}
#home_content{height:auto;padding-top:50px;padding-bottom:40px;background: #f3f3f4}
#home_footer{margin-top: -40px;background: #ffffff;height: 40px;line-height:40px;}

/* 宽屏时，当点击侧边栏缩进按钮后 */
body.mini-sidebar #home_body{margin-left:70px;}
body.mini-sidebar #home_sidebar{width:70px;}

/* 当浏览器变窄，并且菜单是关闭状态时（存在mini-sidebar时）*/
body.body-small.mini-sidebar #home_body{margin-left:0;}
body.body-small.mini-sidebar #home_sidebar{width:0;}

转载于:https://my.oschina.net/asktao/blog/3002320

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/107053.html原文链接：https://javaforall.net