1、二级导航实际上是相当于下拉菜单样式基础上实现的。首先实现导航菜单的样式：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">主页</a></li> <li><a href="#">个人信息</a></li> <li class="disabled"><a href="#">培训</a></li> <li><a href="#">图书</a></li> </ul> </div> </div> </div></body></html>
2、现在我们在导航菜单上实现一个二级菜单<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">主页</a></li> <li><a href="#">个人信息</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 培训<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a>java培训</a> <li><a>oracle培训</a> </ul> </li> <li><a href="#">图书</a></li> </ul> </div> </div> </div></body></html>
3、在浏览器查看此二级菜单的渲染效果
4、利用面包屑导航可以清楚的标记处用户浏览信息在整个网站的具体位置，这样就方便用户惊醒信息的浏览，在bootstrap中可以使用".breadcrumb"样式实现样式的显示。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <ul class="breadcrumb"> <li class="active"><a href="#">主页</a></li> <li><a href="#">个人信息</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 培训<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a>java培训</a> <li><a>oracle培训</a> </ul> </li> <li><a href="#">图书</a></li> </ul> </div> </div> </div></body></html>
5、在浏览器中查看面包屑导航的效果：
6、这样的导航在一些信息浏览的页面上真的很常见的功能。可以进行准备的定位。
