利用bootstrap实现一个简单的响应式的汉堡式菜单效果
投稿于 被查看 39680 次 评论：98
利用bootstrap实现一个简单的响应式的汉堡式菜单效果
首先，开始布局之前，需要先按照顺序分别引入css、jQuery和js文件；
然后，从最简单的菜单搭建起，利用bootstrap创建一个最基本的导航栏的步骤如下：
1、在<nav>标签上添加class类.navbar、.navbar-default，再向上面的元素添加 role="navigation"，有助于增加可访问性。
2、向 <div> 元素添加一个标题.navbar-header，内部包含了带有 .navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
3、为了向导航栏添加链接，只需要在无序列表ul里简单地添加类.nav、.navbar-nav即可。
最后，为了给导航栏添加响应式特性，需要折叠的内容必须包裹在带有.collapse、.navbar-collapse 的 <div> 中。
折叠起来的导航栏实际上是一个带有.navbar-toggle 及两个 data- 元素的按钮：第一个data-toggle，用于调用bootstrap里面JavaScript封装的折叠功能函数；第二个data-target，则是指示要切换到哪一个元素，特别注意的是这里的data-target所对应的是<div class="collapse navbar-collapse" id="example-navbar-collapse"></div>里面的id选择器的值。
而三个带有 .icon-bar 的 <span> 则是创建那个汉堡按钮。
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<!-- 先把bootstrap里面的css、jQuery和bootstrap.js三个文件按顺序加载进来 -->
<meta charset="utf-8">
<title>Bootstrap 实例 - 汉堡式响应式导航栏</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- 页面小屏的时候（这里设置的是(min-width: 768px)）出现的汉堡按钮 -->
<div class="navbar-header">
<a class="navbar-brand" href="#">这里放你的网页logo</a>
<!-- 这里是汉堡式菜单显示隐藏的折叠开关 -->
<!-- data-toggle用于告诉 JavaScript 需要对按钮做什么， data-target指示要切换到哪一个元素。三个带有 .icon-bar 的 <span> 创建汉堡按钮里面的那三根线。 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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="#">菜单2</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 class="divider"></li>
<li><a href="#">分割的第二例导航栏</a></li>
<li class="divider"></li>
<li><a href="#">分割的第三例导航栏</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
用户评论