Bootstrap打造一个左侧折叠菜单的系统模板(一)

我来详细讲解一下"Bootstrap打造一个左侧折叠菜单的系统模板(一)"的完整攻略。此文章的攻略包含以下三部分：

1. 准备工作

在编写左侧折叠菜单前，需要先引入Bootstrap框架。打开网页http://getbootstrap.com/并按照引导指示下载所需文件即可。同时，该模板基于jQuery，所以也需要在页面中引入jQuery库：

<!-- jquery -->
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

接着，在HTML文档中添加基础外框架代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap折叠菜单模板</title>
    <meta charset="utf-8">
    <!-- Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap折叠菜单模板</a>
        </div>
    </div>
</nav>

<!-- 左侧折叠菜单 -->
<div id="sidebar-nav">
    <ul class="nav nav-list">
        <li class="active">
            <a href="#">
                <span class="glyphicon glyphicon-home"></span>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-th-large"></span>
                <span>分类</span>
                <span class="glyphicon glyphicon-chevron-down pull-right"></span>
            </a>
            <ul class="nav nav-list collapse">
                <li><a href="#">产品管理</a></li>
                <li><a href="#">订单管理</a></li>
            </ul>
        </li>
    </ul>
</div>

<!-- 内容区域 -->
<div id="content">
    <h1>Hello, world!</h1>
</div>

</body>
</html>

2. 左侧折叠菜单的实现

首先，在CSS中声明容器样式。该模板的左侧折叠菜单采用的是绝对定位布局，因为它需要与内容部分分别布局。

/* 容器样式开始 */
#sidebar-nav {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}
/* 容器样式结束 */

下一步是处理左侧导航的样式。在HTML中的制作，为了便于浏览器展开收缩，采用了“ul-li”标签的结构方式。

/* 导航样式开始 */
#sidebar-nav .nav > li {
    display: block;
    overflow: hidden;
    position: relative;
}
#sidebar-nav .nav > li > a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    padding: 10px 12px;
    position: relative;
    z-index: 2;
}
#sidebar-nav .nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}
#sidebar-nav .nav > li > ul.nav-list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 999;
    width: 100%;
}
#sidebar-nav .nav > li > ul.nav-list li > a {
    background-color: #eee;
    border-bottom: 1px solid #ddd;
    margin: 0;
}
#sidebar-nav .nav > li.active > ul.nav-list,
#sidebar-nav .nav > li > ul.nav-list:hover {
    display: block;
}
/* 导航样式结束 */

这段CSS代码设置了“ul-li”标签的各种样式，其中：

导航样式开始中，#sidebar-nav .nav > li声明导航列表中的各个单独项，.nav > li > a声明具有超链接功能的导航链接的样式。这一段代码的关键点是#sidebar-nav .nav > li > a:hover，它实现了鼠标悬停时背景变化的效果。
导航样式结束中，#sidebar-nav .nav > li > ul.nav-list声明展开后的二级导航的样式，其中position: absolute使得元素在文档流之外，而完全有序地展开。#sidebar-nav .nav > li.active > ul.nav-list实现了当鼠标滑过父级li元素时使得子元素完全展开。

接下来是折叠菜单按钮的制作。在Bootstrap的文档中，使用<button>标签，给它附上特定的class名即可实现此功能。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-nav">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

3. 完整代码示例

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap折叠菜单模板</title>
    <meta charset="utf-8">
    <!-- Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-nav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap折叠菜单模板</a>
        </div>
    </div>
</nav>

<!-- 左侧折叠菜单 -->
<div id="sidebar-nav">
    <ul class="nav nav-list">
        <li class="active">
            <a href="#">
                <span class="glyphicon glyphicon-home"></span>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-th-large"></span>
                <span>分类</span>
                <span class="glyphicon glyphicon-chevron-down pull-right"></span>
            </a>
            <ul class="nav nav-list collapse">
                <li><a href="#">产品管理</a></li>
                <li><a href="#">订单管理</a></li>
            </ul>
        </li>
    </ul>
</div>

<!-- 内容区域 -->
<div id="content">
    <h1>Hello, world!</h1>
</div>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

至此，Bootstrap打造一个左侧折叠菜单的系统模板就完成了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap打造一个左侧折叠菜单的系统模板(一) - Python技术站