html自定义垂直导航菜单（目前只支持上级+下级两级菜单）
由于工作的需要，昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单，可以通过js配置的方式初始化菜单box（测试环境：chrome 49、IE 10、IE edge）。
no pic u say a j8? 好吧，先上效果图（由于下面是gif，所以一帧一帧的感觉不流畅。讲道理，事实上，切换非常流畅，自行下载看Demo）。
js配置方式：
配置menuBox的方式：menuBox.init(config);
这里的config有三个属性：
menuBoxId（必需，你要配置的菜单根节点所在元素的Id）
multiple（可选，是否可以同时打开多个上级菜单，默认是false，也就是最多显示一个上级菜单的子菜单）
openIndex（可选，初始化要打开上级菜单的index数组，如果你要传值，按照格式应该是数字数组）
//配置第一个手风琴的基本参数
var config01 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox01",
//是否可以打开多个上级菜单的子菜单
multiple: false,
//初始化打开的
openIndex: [3, 4, 5]
}
menuBox.init(config01);
然后看下两个菜单Box的配置：
第一个菜单Box：可以同时打开多个上级菜单，初始化的时候打开第0、1个。
//配置第一个手风琴的基本参数
var config01 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox01",
//是否可以打开多个二级菜单
multiple: true,
//初始化打开的
openIndex: [0,1]
}
menuBox.init(config01); 第二个菜单Box：不可以打开多个上级菜单，初始化的时候打开第1个，如果传入数组有多个值，默认打开第一个有效的index上级菜单。
//配置第二个手风琴的基本参数
var config02 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox02",
//是否可以打开多个二级菜单
multiple: false,
//初始化打开的
openIndex: [-1, 1]
}
menuBox.init(config02);
用到的知识点：
1、flexbox（在ie9及以下布局不兼容，但是还是可以正常看到切换效果）。
2、css3 transform配合transition实现箭头的旋转切换。
3、打开菜单：$().slideDown()、关闭菜单：$().slideUp()、切换菜单：$().slideToggle()。有时间我会修改为css3动画实现切换，尽量不用jquery。
4、<i>标签引用图标font-awesome
下面是相关代码：
html：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="css/menuBox.css" />
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="js/menuBox.js"></script>
<title>MenuBox</title>
</head>
<style>
.top {
background: lightblue;
min-height: 55px;
}
</style> <body>
<div id="top" class="top">
<span>
var config01 = {<br>
menuBoxId: "#menuBox01",<br>
multiple: true,<br>
openIndex: [0,1]<br>
}<br>
menuBox.init(config01);<br><br> var config02 = {<br>
menuBoxId: "#menuBox02",<br>
multiple: false,<br>
openIndex: [-1, 1]<br>
}<br>
menuBox.init(config02);<br>
</span>
</div>
<div id="leftNav" class="left-nav">
<!--
作者：15934179313@163.com
时间：2016-08-03
描述：第一个手风琴二级菜单
-->
<div id="menuBox01" class="menuBox">
<ul class="spMenuBox">
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
</ul>
</div>
<!--
作者：15934179313@163.com
时间：2016-08-03
描述：第二个手风琴菜单
-->
<div id="menuBox02" class="menuBox">
<div class="spMenuBox">
<div class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<div class="subMenuBox">
<div><span class="subMenu">菜单1.1</span></div>
<div><span class="subMenu">菜单1.2</span></div>
<div><span class="subMenu">菜单1.3</span></div>
</div>
</div>
<div class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<div class="subMenuBox">
<div><span class="subMenu">菜单1.1</span></div>
<div><span class="subMenu">菜单1.2</span></div>
<div><span class="subMenu">菜单1.3</span></div>
</div>
</div>
<div class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<div class="subMenuBox">
<div><span class="subMenu">菜单1.1</span></div>
<div><span class="subMenu">菜单1.2</span></div>
<div><span class="subMenu">菜单1.3</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$().ready(function() {
initLeftNavHeight();
initMenu();
}) /**初始化左侧导航栏高度**/
function initLeftNavHeight() {
initHeight(); function initHeight() {
var total = document.documentElement.clientHeight;
var topHeight = $("#top").height();
$("#leftNav").height(total - topHeight);
} document.body.onresize = function() {
initHeight();
}
} /**初始化菜单选项**/
function initMenu() {
//配置第一个手风琴的基本参数
var config01 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox01",
//是否可以打开多个上级菜单
multiple: true,
//初始化打开的
openIndex: [0,2]
}
menuBox.init(config01); //配置第二个手风琴的基本参数
var config02 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox02",
//是否可以打开多个上级菜单
multiple: false,
//初始化打开的上级菜单的index数组
openIndex: [-1, 1]
}
menuBox.init(config02);
}
</script> </html>
menuBox.css:
body {
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.left-nav {
background: lightgray;
height: 100%;
overflow-y: overlay;
position: absolute;
/**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
/**菜单box**/
.menuBox {
width: 300px;
margin: 5px;
}
/**默认不显示二级菜单**/
.menuBox .subMenuBox {
display: none;
}
/**一级菜单样式**/
.spMenuBox>*>.spMenu {
align-items: center;
background: darkslateblue;
border-bottom: 1px solid lightgray;
cursor: pointer;
color: white;
/**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**flexbox兼容**/
-webkit-justify-content: space-around;
-webkit-box-pack: space-around;
-moz-box-pack: space-around;
-ms-flex-pack: space-around;
justify-content: space-around;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/**最后一个一级菜单样式**/
.spMenuBox>*:last-child>.spMenu {
align-items: center;
background: darkslateblue;
border-bottom: 0px;
color: white;
cursor: pointer;
/**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**flexbox兼容**/
webkit-justify-content: space-around;
-webkit-box-pack: space-around;
-moz-box-pack: space-around;
-ms-flex-pack: space-around;
justify-content: space-around;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/**箭头切换用动画实现**/
.fa-angle-down {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.spMenuItem.active>.spMenu>.fa-angle-down {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/**二级菜单样式*/
.subMenuBox>*>.subMenu {
align-items: center;
background: #ccc;
border-bottom: 1px solid lightyellow;
cursor: pointer;
padding: 5px 10px;
/**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/**最后一个二级菜单样式**/
.subMenuBox>*:last-child>.subMenu {
align-items: center;
background: #ccc;
border-bottom: 0px;
cursor: pointer;
padding: 5px 10px;
/**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
menuBox.js:
/**
* 配置菜单
* 示例：
* 配置基本参数
* var config = {
* //配置菜单的MenuBoxId
* menuBoxId: "#menuBox01",
* //是否可以打开多个上级菜单
* multiple: true,
* //初始化打开的菜单数组
* openIndex: [1, 3, 5]
* }
* menuBox.init(config);
*
* @author DarkRanger
* http: //www.cnblogs.com/wrcold520/
*/ ! function($) {
if($ == undefined) {
throw new Error("please put your jquery.js top of menuBox.js!")
}
var menuBox = function() {};
//要配置的menuBox的菜单id
menuBox.menuBoxId = undefined;
//是否可以显示多个上级菜单的子菜单
menuBox.multiple = false;
//默认关闭所有一级菜单
menuBox.openIndex = []; //menuBox初始化方法
menuBox.init = function(config) { var cntMenuBox = new menuBox(); //定义上级菜单spMenu数组
var spMenus; if(config.menuBoxId == undefined) {
throw new Error("your config has not 'menuBoxId', please make sure your menuBox is existed!");
} else {
cntMenuBox.menuBoxId = $(config.menuBoxId) ? config.menuBoxId : undefined;
} if(config.multiple == undefined) {
console.warn("your config has not 'multiple', default value is false which means you can open only one spMenu at the same time!");
} else {
cntMenuBox.multiple = config.multiple;
} if(config.openIndex == undefined) {
console.warn("your config has not 'openIndex', default value is a Array which's length is 0!");
} else if(!config.openIndex instanceof Array) {
throw new Error("your config 'openIndex' should be a number Array");
} else {
cntMenuBox.openIndex = unique(config.openIndex, false);
} //确定对应的menuBox
cntMenuBox.menuBoxId = config.menuBoxId;
//是否打开其他某一个的时候关闭其他选项
var closeOthers = !cntMenuBox.multiple;
//初始化点击事件
initClickEvent(cntMenuBox, closeOthers);
//确定上级菜单数组
spMenus = $(cntMenuBox.menuBoxId + " .spMenu");
//打开传入的数组
for(var i in cntMenuBox.openIndex) {
var index = cntMenuBox.openIndex[i];
var spMenu = spMenus[index];
if(spMenu) {
openSpMenu(cntMenuBox.menuBoxId, index);
if(!cntMenuBox.multiple) {
break;
}
}
}
} function unique(arr) {
var result = [],
hash = {};
for(var i = 0, elem;
(elem = arr[i]) != null; i++) {
if(!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
} //初始化点击事件
function initClickEvent(menuBox, closeOthers) {
$(menuBox.menuBoxId + " .spMenu").on("click", function() {
var cntSpMenu$ = $(this);
//要切换的元素
cntSpMenu$.next().slideToggle();
cntSpMenu$.parent().toggleClass("active") var cntSpMenu = cntSpMenu$['context'];
if(closeOthers == true) {
var spMenus = $(menuBox.menuBoxId + " .spMenu");
$.each(spMenus, function(index, spMenu) {
if(cntSpMenu != spMenu) {
closeSpMenu(menuBox.menuBoxId, index);
}
});
}
});
} //打开某一个item
function openSpMenu(menuBoxId, index) {
//要切换的元素
var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
spItem.next().slideDown();
spItem.parent().addClass("active")
}
//关闭某一个item
function closeSpMenu(menuBoxId, index) {
//要切换的元素
var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
spItem.next().slideUp();
spItem.parent().removeClass("active")
}
//切换某一个item
function toggleSpMenu(menuBoxId, index) {
//要切换的元素
var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
spItem.next().slideToggle();
spItem.parent().toggleClass("active")
} window.menuBox = menuBox;
}($);
附上源码：