1. Python技术站首页
  2. css

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

• css

我来详细讲解一下"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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • JS组件Bootstrap导航条使用方法详解

    JS组件Bootstrap导航条使用方法详解 Bootstrap是一个流行的前端框架，为开发Web应用程序提供了大量的组件和工具。其中，导航条是一个非常重要的组件，它可以帮助用户快速浏览网站的不同部分。本文将详细讲解Bootstrap导航条的使用方法。 首先导入Bootstrap库 导航条是Bootstrap库的一部分，因此首先需要导入Bootstrap库。…

    css 2023年6月10日
    00

  • CSS Hack详解

    CSS Hack 详解 CSS Hack是一种解决CSS在不同浏览器之间兼容性问题的技术，它的本质是利用不同浏览器对CSS的解析不同来达到兼容的目的。下面我们来详细了解一下CSS Hack的使用方法。 基础介绍 Hack的种类 常见的CSS Hack主要有三种： 属性级别Hack：用于针对不同浏览器设置不同的CSS属性值。 选择器级别Hack：用于针对不同浏…

    css 2023年6月9日
    00

  • CSS框架sass的简单一览

    CSS框架sass的简单一览 什么是Sass？ Sass (Syntactically Awesome Stylesheets) 是一种预处理器，它是 CSS 的一个扩展，在样式表中加入了一些预编译的语法，使得开发者可以更简洁地编写 CSS，同时也使样式表更易于维护和扩展。 Sass的安装 首先确保你电脑里已经安装了Ruby，具体可参考官方文档 https:…

    css 2023年6月9日
    00

  • CSS实现绝对的完美圆角框

    要实现完美的圆角框，需要使用一些CSS技巧和属性来创建一个全圆角边框的容器。以下是一些步骤： 1. 添加一个容器 首先，需要添加一个容器，例如一个div元素，在HTML页面中，如下所示： <div class="rounded-box"></div> rounded-box是自定义的类名，可以随意更改，视需求而定。…

    css 2023年6月10日
    00

  • css3 transform导致子元素固定定位变成绝对定位的方法

    下面是关于“CSS3 transform导致子元素固定定位变成绝对定位的方法”的攻略： 问题 在使用CSS3 transform进行旋转、缩放或倾斜的时候，可能会导致子元素的固定定位变成了绝对定位，这会影响页面布局。下面介绍两种解决方法来解决这个问题。 方法一：使用will-change属性 will-change属性是用来告诉浏览器哪些CSS属性可能会发生…

    css 2023年6月9日
    00

  • 常用的CSS命名规则 web标准化设计

    对于CSS命名规则，web标准化设计的完整攻略如下： 1. 命名规则要有意义 命名规则应该准确反映元素的意义，并且避免使用无意义的名称。使用简明、有意义的名称要比使用类似“box1”或“bg-blue”的名称更好。 例如，我们可以使用 “header-container” 来代表头部部分容器，而不是使用 “box1” 。 2. 准确描述元素的作用 命名规则应…

    css 2023年6月9日
    00

  • CSS3之背景尺寸Background-size使用介绍

    CSS3之背景尺寸Background-size使用介绍 CSS3中提供了一个很方便的属性background-size，可以控制元素背景图片的尺寸和裁剪方式。在本篇攻略中，我们将细致介绍background-size的使用方法。 基本语法 background-size属性可以接受一个或两个值，分别表示图片宽度和高度。 值可以是一个有效的CSS长度值，如p…

    css 2023年6月9日
    00

  • 单元素利用css实现多重边框效果示例代码

    下面是关于单元素利用CSS实现多重边框的攻略。 理解多重边框的概念 多重边框是指在一个元素的边缘上不止是一条描边线。在Web开发中，我们可以使用多重边框来增强网页的视觉效果。多重边框有许多种实现方式，其中一种是使用CSS的box-shadow属性。 使用box-shadow来实现多重边框 我们可以使用box-shadow属性来实现多重边框的效果。box-sh…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部