bootstrap+jquery+css折叠菜单 收缩菜单 效果（只有两级菜单）
程序员文章站
2022-06-30 18:19:28
...
<!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;
}
div.container-fluid {}
div.menuDiv {
width: 230px;
background: rgba(44, 59, 65, 1);
}
div.menuDiv ul.nav li a {
text-decoration: none;
cursor: pointer;
border-left-width: 3px;
border-left-style: solid;
border-left-color: rgba(60, 141, 188, 0);
}
div.menuDiv ul.nav li a:link,
div.menuDiv ul.nav li a:visited,
div.menuDiv ul.nav li a:active {
background: rgba(1, 1, 1, 0);
color: rgba(184, 199, 206, 1);
}
div.menuDiv ul.nav li a:hover {
background: rgba(30, 40, 44, 1);
color: rgba(255, 255, 255, 1);
}
div.menuDiv ul.nav .icon-left {
padding-right: 5px;
}
div.menuDiv ul.nav .icon-right {
float: right;
padding-top: 12px;
padding-right: 10px;
}
div.menuDiv .nav-first {}
div.menuDiv .nav-first>li {}
div.menuDiv .nav-first>li>a {
height: 40px;
line-height: 40px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
margin: 0;
}
div.menuDiv .nav-first>li.active>a {
background: rgba(30, 40, 44, 1) !important;
color: rgba(255, 255, 255, 1) !important;
border-left-color: rgba(60, 141, 188, 1);
}
div.menuDiv .nav-child {}
div.menuDiv .nav-child>li {}
div.menuDiv .nav-child>li>a {
height: 30px;
line-height: 30px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
margin: 0;
}
div.menuDiv .nav-child>li.borderLeft>a {
border-left-color: rgba(60, 141, 188, 0.6);
}
div.menuDiv .nav-child>li.active>a {
background: rgba(30, 40, 44, 1) !important;
color: rgba(255, 255, 255, 1) !important;
border-left-color: rgba(60, 141, 188, 0.6);
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello，Bootstrap！</h1>
</div>
<br>
<div class="container-fluid">
<button onclick="menuPullback('.menuDiv')">点我收缩菜单</button>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="menuDiv" role="navigation">
<!--
nav-pills 胶囊标签
nav-stacked 垂直堆叠
-->
<ul class="nav nav-list nav-first">
<li class="active"><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>首页</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单1</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单2</span></a></li>
<li>
<a href="#">
<span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="icon-right glyphicon glyphicon-chevron-up"></span>
<span>菜单3</span>
</a>
<ul class="nav nav-list nav-child">
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单31</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单32</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单33</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单34</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单35</span></a></li>
</ul>
</li>
<li>
<a href="#">
<span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="icon-right glyphicon glyphicon-chevron-up"></span>
<span>菜单4</span>
</a>
<ul class="nav nav-list nav-child">
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单41</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单42</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单43</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单44</span></a></li>
<li><a href="#"><span class="icon-left glyphicon glyphicon-home" aria-hidden="true"></span><span>菜单45</span></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>
// 是否显示一级菜单折叠按钮
var hsfoldIcon = true;
// 需要控制隐藏/显示的span元素
var hsSpanElement; // = hsfoldIcon ? 'ul.nav>li>a>span:not([class*="glyphicon "])': 'ul.nav>li>a>span:not([class*="icon-left "])';
/** 一级菜单绑定单击事件(折叠/展开二级菜单) */
$('ul.nav-first>li>a').click(function(event) {
// 实现菜单折叠
$(this).next('ul').slideToggle();
$(this).children('span.icon-right').toggleClass('glyphicon-chevron-up').toggleClass('glyphicon-chevron-down');
hsSpanElement = hsfoldIcon ? 'ul.nav>li>a>span:not([class*="glyphicon "])' : 'ul.nav>li>a>span:not([class*="icon-left "])';
$(hsSpanElement).each(function() {
if (menuIsShow) {
$(this).show();
} else {
$(this).hide();
}
});
});
$('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('borderLeft').removeClass('active');
// 去除所有一级菜单活动状态
$('ul.nav-first>li').removeClass('active');
// 当前菜单(一级菜单)加上活动状态
$(obj).addClass('active');
// 获取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('borderLeft').removeClass('active');
// 当前菜单及其同级菜单(二级菜单)加上状态
$(obj).parent().children().each(function(i, v) {
if ($(this).children('a').html() != $(obj).children('a').html()) {
$(this).addClass('borderLeft');
} else {
$(this).addClass('active');
return false;
}
});
// 去除所有一级菜单活动状态
$('ul.nav-first>li').removeClass('active');
// 当前菜单的上级菜单(一级菜单)加上活动状态
$(obj).parent().parent().addClass('active');
// 获取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);
}
var menuIsShow = true; // 菜单收缩标志
var menuWidth; // 菜单宽度
/**
* 菜单收缩/展开
* element 菜单所在容器宽度设置,例如'#menuDiv'
*/
function menuPullback(element) {
// 控制li>a>span隐藏状态
hsSpanElement = hsfoldIcon ? 'ul.nav>li>a>span:not([class*="glyphicon "])' : 'ul.nav>li>a>span:not([class*="icon-left "])';
$(hsSpanElement).each(function() {
if ($(this).is(':hidden')) {
$(this).show();
} else {
$(this).hide();
}
});
// 判断menuIsShow的状态
if (menuIsShow) {
menuWidth = 60;
$(element).width(menuWidth); // 设置宽度
// 修改标志位
menuIsShow = false;
} else {
menuWidth = 230;
$(element).width(menuWidth); // 设置宽度
menuIsShow = true;
}
}
/**
* 文字化菜单(菜单展开)
* element 菜单所在容器宽度设置,例如'#menuDiv'
*/
function menuExtend(element) {
// 控制li>a>span隐藏状态
hsSpanElement = hsfoldIcon ? 'ul.nav>li>a>span:not([class*="glyphicon "])' : 'ul.nav>li>a>span:not([class*="icon-left "])';
$(hsSpanElement).each(function() {
$(this).show();
});
// 判断menuIsShow的状态
menuWidth = 230;
$(element).width(menuWidth); // 设置宽度
menuIsShow = true;
}
/**
* 图标化菜单(菜单收缩)
* element 菜单所在容器宽度设置,例如'#menuDiv'
*/
function menushrink(element) {
// 控制li>a>span隐藏状态
hsSpanElement = hsfoldIcon ? 'ul.nav>li>a>span:not([class*="glyphicon "])' : 'ul.nav>li>a>span:not([class*="icon-left "])';
$(hsSpanElement).each(function() {
$(this).hide();
});
// 判断menuIsShow的状态
menuWidth = 60;
$(element).width(menuWidth); // 设置宽度
// 修改标志位
menuIsShow = false;
}
$(function() {
hsfoldIcon = true;
var element = '.menuDiv';
menuPullback(element); // 收缩菜单
// 鼠标经过(展开菜单)
$(element).mouseover(function() {
menuExtend(element);
});
// 鼠标离开(收缩菜单)
$(element).mouseout(function() {
menushrink(element);
});
});
</script>
</body>
</html>
上面是一级菜单**
上面是二级菜单**
上面是二级菜单被折叠
上面是菜单收缩
上面是菜单收缩和二级菜单折叠
上面是菜单收缩后隐藏一级菜单折叠图标
该菜单是我参照AdminLTE的菜单效果自己模仿写的，本来自己用的AdminLTE但是发现菜单和页面交互不好，一点菜单就刷新整个页面的，自己想改的话太麻烦了，要看它底层，而且引用的组件比较多，都给我绕晕了。后来工作中用到layui，又采用layui的菜单，但是发现layui的样式和bootstrap有些会互相影响覆盖，但是又想用bootstrap就弃用了layui准备自己写菜单的效果。
代码里有个aHref这个是我一开始使用AdminLTE结合springboot、thymeleaf的时候发现的一个bug（adminLTE里一级菜单如果存在treeview属性a链接的功能会失效)，于是就给了一个aHref属性用来存菜单链接，后面请求的时候再取出来用，你们可以忽略不计
只写了两级菜单，太多的不想考虑了，自己慢慢写断断续续写了好久，对自己前端的积累挺有帮助的，写的不好大家海涵
20180822对代码进行了改进：
1)jquery的初始化方法297行变量hsfoldIcon
hsfoldIcon=false; 收缩菜单会隐藏一级菜单折叠图标
hsfoldIcon=true; 收缩菜单会显示一级菜单折叠图标
2)添加了鼠标经过和离开自动触发收缩菜单事件,不想要的可以注释掉298行后面的代码和两个绑定事件
如果有bug请留言
上一篇： Menu简单使用
下一篇： ThinkPHP--控制器（二）