<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>侧边菜单test</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style type="text/css">
* {
box-sizing: border-box !important;
}
body{
margin: 0 auto;
}
div.menuDiv {
width: 15%;
background: rgba(44, 59, 65, 1);
}
ul.nav>li>a:link,
ul.nav>li>a:visited,
ul.nav>li>a:active,
ul.nav>li>a:hover {
color: rgba(184, 199, 206, 1);
text-decoration: none;
background: rgba(1, 1, 1, 0);
cursor: pointer;
}
ul.nav>li a:hover {
background: rgba(30, 40, 44, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
ul.nav .icon-left {
padding-right: 10px;
}
ul.nav .icon-right {
float: right;
}
.nav-first>li {}
.nav-first>li>a {
border-left: 3px solid rgba(60, 141, 188, 0);
}
.nav-child>li {}
.nav-child>li>a {
padding-left: 30px;
border-left: 3px solid rgba(60, 141, 188, 0);
}
.nav-first {}
.nav-first-active>a {
background: rgba(30, 40, 44, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
.nav-child {}
.nav-child-active>a {
background: rgba(30, 40, 44, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<h1>Hello，Bootstrap！</h1>
</div>
<div class="container-fluid">
<div class="row ">
<div class="menuDiv center-block" role="navigation">
<!--
nav-pills 胶囊标签
nav-stacked 垂直堆叠
-->
<ul class="nav nav-list nav-first">
<li class=""><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>首页</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单1</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单2</a></li>
<li>
<a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单3<span class="glyphicon glyphicon-chevron-up icon-right "></span></a>
<ul class="nav nav-list nav-child">
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单31</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单32</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单33</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单34</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单35</a></li>
</ul>
</li>
<li>
<a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单4<span class="glyphicon glyphicon-chevron-up icon-right "></span></a>
<ul class="nav nav-list nav-child">
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单41</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单42</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单43</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单44</a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>菜单45</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$('ul.nav-first>li>a').click(function(event) {
// 实现菜单折叠
$(this).next('ul').slideToggle();
$(this).children('span:eq(1)').toggleClass('glyphicon-chevron-up');
$(this).children('span:eq(1)').toggleClass('glyphicon-chevron-down');
});
$('ul.nav-first>li').click(function(event) {
menuClick1(this);
});
$('ul.nav-first>li>ul.nav-child>li').click(function(event) {
menuClick2(this);
});
// obj是li
function menuClick1(obj) {
var objUl = $(obj).find('ul');
var aHref = "/_xwq/content-wrapper/404.html";
if (objUl.html() == undefined || objUl.length <= 0) { // 无子菜单
// 去除所有二级菜单活动状态
$('ul.nav-first>li>ul.nav-child>li').removeClass('nav-child-active').children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 0)'
});
// 去除所有一级菜单活动状态
$('ul.nav-first>li').removeClass('nav-first-active').children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 0)'
});
// 当前菜单(一级菜单)加上活动状态
$(obj).addClass('nav-first-active').children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 1)'
});
// 获取a标签链接
if (!($(obj).find('a').attr('aHref') == undefined || $(obj).find('a').attr('aHref') == '#' || $(obj).find('a').attr('aHref').trim() == '')) {
aHref = $(obj).find('a').attr('aHref');
}
console.log("menuUrl:" + aHref);
// $('.basepage_container_right_center').load(aHref);
}
}
// obj是li
function menuClick2(obj) {
var aHref = "/_xwq/content-wrapper/404.html";
// 去除所有二级菜单活动状态
$('ul.nav-first>li>ul.nav-child>li').removeClass('nav-child-active').children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 0)'
});
// 当前菜单及其同级菜单(二级菜单)加上状态
$(obj).parent().children().each(function(i, v) {
if ($(this).children('a').html() != $(obj).children('a').html()) {
$(this).children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 0.5)'
});
} else {
$(this).addClass('nav-child-active').children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 0.5)'
});
return false;
}
});
// 去除所有一级菜单活动状态
$('ul.nav-first>li').removeClass('nav-first-active').children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 0)'
});
// 当前菜单的上级菜单(一级菜单)加上活动状态
$(obj).parent().parent().addClass('nav-first-active').children('a').css({
'border-left': '3px solid rgba(60, 141, 188, 1)'
});
// 获取a标签链接
if (!($(obj).find('a').attr('aHref') == undefined || $(obj).find('a').attr('aHref') == '#' || $(obj).find('a').attr('aHref').trim() == '')) {
aHref = $(obj).find('a').attr('aHref');
}
console.log("menuUrl:" + aHref);
// $('.basepage_container_right_center').load(aHref);
}
</script>
</body>
</html>
上面是一级菜单激活
上面是二级菜单激活
上面是二级菜单被折叠
该菜单是我参照AdminLTE的菜单效果自己模仿写的，本来自己用的AdminLTE但是发现菜单和页面交互不好，一点菜单就刷新整个页面的，自己想改的话太麻烦了，要看它底层，而且引用的组件比较多，都给我绕晕了。后来工作中用到layui，又采用layui的菜单，但是发现layui的样式和bootstrap有些会互相影响覆盖，但是又想用bootstrap就弃用了layui准备自己写菜单的效果。
代码里有个aHref这个是我一开始使用AdminLTE结合springboot、thymeleaf的时候发现的一个bug（adminLTE里一级菜单如果存在treeview属性a链接的功能会失效)，于是就给了一个aHref属性用来存菜单链接，后面请求的时候再取出来用，你们可以忽略不计
只写了两级菜单，太多的不想考虑了，自己慢慢写断断续续写了好久，对自己前端的积累挺有帮助的，写的不好大家海涵