文档章节

使用Boostrap V4,左侧菜单栏可缩进,并根据屏幕宽度自适应大小。

Asktao
 Asktao
发布于 01/16 16:35
字数 735
阅读 87
收藏 0

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

思路概要:

  1. 使用.body-small,代表屏幕处于小分辨率下。用JQ的resize()方法监听。并在<body>处增加或删除。
  2. 使用.mini-sidebar,代表侧边栏处于收缩状态下。( .body-small 和 .mini-sidebar同时存在时,代表小分辨率下菜单收缩)
  3. 开始干活,根据<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;}

© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
侧滑菜单(抽屉效果)DrawerLayout实现原理

DrawerLayout是android support包新增的侧滑菜单控件,在Android Studio中可以很方便的创建一个带有侧滑菜单的页面。今天,我们来分析DrawerLayout它的实现原理,来加深对它的了解。为了能让...

Ihesong
2017/10/15
0
0
自适应网页设计的方法(手机端良好的访问体验)

昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验...

DanielYue
2018/06/29
0
0
用window.open实现全屏显示窗口

window.open(url,'资金计划项超支提醒','width='+ (window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+ ',top=0,left=0,resizable=yes,status=yes,menubar=no,scrol......

红薯没我帅
2012/03/02
181
0
为iPhone 6设计自适应布局

Apple从iOS 6加入了Auto Layout后开始就比较委婉的开始鼓励、建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在...

阳光飞鸟
2015/03/13
138
0
QQ测拉效果实现(一)

前言:总有一天,你会成为你想象的那样。 转载本文请注明出处,尊重原创: 如果想第一时间收到文章更新,可以微信扫描二维码关注我的公众号,或者微信直接搜索“Android小菜”进行关注,所有...

qq_32059827
2017/09/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

5.设计模式之四:抽象工厂模式【创建型模式】

前面介绍的工厂方法模式中考虑的是一类产品的生产,如畜牧场只养动物、电视机厂只生产电视机、计算机软件学院只培养计算机软件专业的学生等。 同种类称为同等级,也就是说:工厂方法模式只考...

Eappo_Geng
12分钟前
4
0
一个基于springSecurity的Json Web Token的实现

SecurityJwt 一个基于springSecurity的Json Web Token的实现 GitHub地址 提要 一、SpringSecurity Spring Security,一种基于 Spring AOP 和 Servlet 过滤器的安全框架。它提供全面的安全性解...

左羽
27分钟前
5
0
七牛云批量下载图片到本地

使用七牛云提供的下载工具批量下载 下载:https://pan.baidu.com/s/1kVcdFDH xp1p下载解压后,qiniu文件里有qshell.conf 和 qshell.exe两个文件,编辑qshell.conf`{"dest_dir": "F://qi......

闊苡訆涐囍醣
30分钟前
4
0
米联客(MSXBO) 基于VIVADO实现FPGA时序笔记之概述(一)

FPGA时序要满足要求,这个基本原理大家基本都知道,但是如何使用VIVADO IDE工具进行时序设计、时序分析、判断时序是否满足要求,这个对很多FPGA工程师来说,还是比较抽象,因为时序分析的工具...

msxbo
43分钟前
6
0
Centos7 命令行下kvm安装windows,linux

查看是否支持 egrep "svm|vmx" /proc/cpuinfo |uniq 安装软件 yum install libvirt -yyum -y install qemu-kvmsystemctl enable libvirtd && systemctl start libvirtd# 启动lib......

以谁为师
45分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部