bootstrap-响应式导航栏

2018-01-26

前言

接手一个项目的后台管理系统的时候，发现之前的同事使用bootstrap实现的响应式侧边导航栏：当设备屏幕小于768像素时，侧边导航栏隐藏，点击memu按钮控制显示隐藏；否则，侧边导航栏在屏幕右侧显示。觉得这是一个体验很好的操作，特此记录。

实例一：页面顶部固定的导航栏在小屏幕、手机屏幕浏览时自动折叠隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <title>bootstrap-响应式导航栏</title>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">某某科技有限公司</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">公司介绍</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        行业方案 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">政府部门</a></li>
                        <li><a href="#">教育行业</a></li>
                        <li><a href="#">酒店/旅游</a></li>
                        <li><a href="#">电子商务</a></li>
                        <li><a href="#">医疗卫生</a></li>
                    </ul>
                </li>
                <li><a href="#">公司新闻</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>
</body>
</html>

注意：点击menu按钮，控制侧边导航栏的显示和隐藏，那么如何控制？

通过设置menu按钮的data-target属性值为导航栏的id值即可。

menu按钮： <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

导航栏： <div class="collapse navbar-collapse" id="example-navbar-collapse">...</div>

实例二：页面侧边栏在小屏幕、手机屏幕浏览时自动折叠隐藏（侧边栏是用metisMenu插件实现的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link href="css/metisMenu.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  	<script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
  	<script src="js/metisMenu.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <title>Title</title>
    <style>
        .sidebar .sidebar-nav.navbar-collapse {
            padding-right: 0;
            padding-left: 0;
        }
        .sidebar ul li {
            border-bottom: 1px solid #e7e7e7;
        }
        .sidebar ul li a.active {
            background-color: #eee;
        }
        .sidebar .arrow {
            float: right;
        }

        .sidebar .fa.arrow:before {
            content: "\f104";
        }

        .sidebar .active>a>.fa.arrow:before {
            content: "\f107";
        }
        .sidebar .nav-second-level li,
        .sidebar .nav-third-level li {
            border-bottom: 0!important;
        }
        .sidebar .nav-second-level li a {
            padding-left: 37px;
        }
        .sidebar .nav-third-level li a {
            padding-left: 52px;
        }
        @media(min-width:768px) {
            .sidebar {
                z-index: 1;
                position: absolute;
                width: 250px;
                margin-top: 51px;
            }
        }
    </style>
</head>
<body>

<nav class="navbar navbar-inverse navbar-static-top top_navbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">某某科技有限公司</a>
    </div>
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
            <ul class="nav" id="side-menu">
                <li>
                    <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">Second Level Item</a>
                        </li>
                        <li>
                            <a href="#">Second Level Item</a>
                        </li>
                        <li>
                            <a href="#">Third Level <span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">Blank Page</a>
                        </li>
                        <li>
                            <a href="#">Login Page</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">Blank Page</a>
                        </li>
                        <li>
                            <a href="#">Login Page</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">Blank Page</a>
                        </li>
                        <li>
                            <a href="#">Login Page</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<script>
    $(function() {
        $('#side-menu').metisMenu();
    });

    //Loads the correct sidebar on window load,
    //collapses the sidebar on window resize.
    // Sets the min-height of #page-wrapper to window size
    $(function() {
        $(window).bind("load resize", function() {
            topOffset = 50;
            width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
            if (width < 768) {
                $('div.navbar-collapse').addClass('collapse');
                topOffset = 100; // 2-row-menu
            } else {
                $('div.navbar-collapse').removeClass('collapse');
            }

            height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
            height = height - topOffset;
            if (height < 1) height = 1;
            if (height > topOffset) {
                $("#page-wrapper").css("min-height", (height) + "px");
            }
        });

        var url = window.location;
        var element = $('ul.nav a').filter(function() {
            return this.href == url ;//|| url.href.indexOf(this.href) == 0
        }).addClass('active').parent().parent().addClass('in').parent();
        if (element.is('li')) {
            element.addClass('active');
        }
    });

</script>
</body>
</html>

注意：这里就不说明如何使用metisMenu插件了。