html自定义垂直导航菜单（加强版--自定义传入menu参数，支持JSONArray、JSArray、JSONObject、JSObject）
在上一篇中我简单写了个html自定义垂直导航菜单，缺点很明显，里面的数据是固定死的，不能动态更改数据。
这里我重写了一个修改版的垂直二级导航菜单，将原先的menuBox.init(config);修改为menuBox.init(config, dataObj);，这里的dataObj就是要传入的菜单的数据，可以传入的类型有JSONArray、JSArray、JSONObject、JSObject，其实JSONObject就是JSONArray中的一个元素，JSObject也是JSArray中的一个元素。
先上效果图：
怎么样，还可以吧（作为一名菜鸡，做个二级菜单不容易，吹一波不过分），顺便附上源码：menuBox1.1.zip。
你完全可以按照你的需求修改对应的css样式，打造属于你自己的二级菜单。
上代码：
JSObject
{
name: "spMenu1",
iconClasses: "fa fa-chrome",
subMenus: [{
name: "subMenu11",
url: "#"
}, {
name: "subMenu12",
url: "#"
}, {
name: "subMenu13",
url: "#"
}, {
name: "subMenu14",
url: "#"
}]
}
这里需要解释下：
上面的js就是一级菜单的JSObject元素（当然，你也可以转化为标准的json字符串格式），属性分别是：
name：当前一级菜单的名称
iconClasses：在效果图中大家可以看到，每个一级菜单前面是有图标的，这里使用的是fontawesome(旧版本，你可以使用新版本，将font-awesome文件夹替换掉就可以使用新的class样式图标了)，这里的iconClasses就是<i></i>的class，你可以添加属于自己的图标，如果你想添加书签的图标，你可以传入字符串"fa fa-bookmark"，挺简洁的。
subMenus：这个就是二级菜单的数组集合了，这里默认二级菜单没有图标，只有名称和url（点击跳转或者切换内容区域的url）
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-1.1.css" />
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/checkutil.js"></script>
<script type="text/javascript" src="js/menuBox-1.1.js"></script>
<title></title>
</head>
<style>
.menuBox {
margin: 20px;
}
</style> <body>
<div id="menuBox01" class="menuBox"> </div>
<div id="menuBox02" class="menuBox"> </div>
<div id="menuBox03" class="menuBox"> </div>
<div id="menuBox04" class="menuBox"> </div>
</body>
<script>
var dataObj01 = [{
name: "spMenu1",
iconClasses: "fa fa-chrome",
subMenus: [{
name: "subMenu11",
url: "#"
}, {
name: "subMenu12",
url: "#"
}, {
name: "subMenu13",
url: "#"
}, {
name: "subMenu14",
url: "#"
}]
}, {
name: "spMenu2",
iconClasses: "fa fa-firefox",
subMenus: [{
name: "subMenu21",
url: "#"
}, {
name: "subMenu22",
url: "#"
}, {
name: "subMenu23",
url: "#"
}, {
name: "subMenu34",
url: "#"
}]
}, {
name: "spMenu3",
iconClasses: "fa fa-internet-explorer",
subMenus: [{
name: "subMenu31",
url: "#"
}, {
name: "subMenu32",
url: "#"
}, {
name: "subMenu33",
url: "#"
}, {
name: "subMenu34",
url: "#"
}]
}]; var config01 = {
menuBoxId: "#menuBox01",
multiple: true,
openIndex: []
}
menuBox.init(config01, dataObj01); var dataObj02 = JSON.stringify(dataObj01); var config02 = {
menuBoxId: "#menuBox02",
multiple: false,
openIndex: []
}
menuBox.init(config02, dataObj02); var dataObj03 = {
name: "spMenu1",
iconClasses: "fa fa-chrome",
subMenus: [{
name: "subMenu11",
url: "#"
}, {
name: "subMenu12",
url: "#"
}, {
name: "subMenu13",
url: "#"
}, {
name: "subMenu14",
url: "#"
}]
};
var config03 = {
menuBoxId: "#menuBox03",
multiple: false,
openIndex: []
}
menuBox.init(config03, dataObj03); var dataObj04 = JSON.stringify(dataObj03);
var config04 = {
menuBoxId: "#menuBox04",
multiple: true,
openIndex: []
}
menuBox.init(config04, dataObj04);
</script> </html>
menuBox-1.1.css
body {
margin:;
}
ul {
list-style: none;
padding:;
margin:;
}
/**菜单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;
}
/**箭头切换用动画实现**/
.spMenuItem>.spMenu>.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 {
color: darkgray;
align-items: center;
background: darkgreen;
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 {
color: darkgray;
align-items: center;
background: #darkgreen;
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-1.1.js：
/**
* 需要用到的js：
* jquery.js
* json2.js
* checkutil.js
* 示例：
* var dataObj01 = [{
* name: "spMenu1",
* iconClasses: "fa fa-chrome",
* subMenus: [{
* name: "subMenu11",
* url: "#"
* }, {
* name: "subMenu12",
* url: "#"
* }, {
* name: "subMenu13",
* url: "#"
* }, {
* name: "subMenu14",
* url: "#"
* }]
* }, {
* name: "spMenu2",
* iconClasses: "fa fa-firefox",
* subMenus: [{
* name: "subMenu21",
* url: "#"
* }, {
* name: "subMenu22",
* url: "#"
* }, {
* name: "subMenu23",
* url: "#"
* }, {
* name: "subMenu34",
* url: "#"
* }]
* }, {
* name: "spMenu3",
* iconClasses: "fa fa-internet-explorer",
* subMenus: [{
* name: "subMenu31",
* url: "#"
* }, {
* name: "subMenu32",
* url: "#"
* }, {
* name: "subMenu33",
* url: "#"
* }, {
* name: "subMenu34",
* url: "#"
* }]
* }];
*
* var config01 = {
* menuBoxId: "#menuBox01",
* multiple: true,
* openIndex: []
* }
* menuBox.init(config01, dataObj01);
*
* var dataObj02 = JSON.stringify(dataObj01);
*
* var config02 = {
* menuBoxId: "#menuBox02",
* multiple: false,
* openIndex: []
* }
* menuBox.init(config02, dataObj02);
*
* var dataObj03 = {
* name: "spMenu1",
* iconClasses: "fa fa-chrome",
* subMenus: [{
* name: "subMenu11",
* url: "#"
* }, {
* name: "subMenu12",
* url: "#"
* }, {
* name: "subMenu13",
* url: "#"
* }, {
* name: "subMenu14",
* url: "#"
* }]
* };
* var config03 = {
* menuBoxId: "#menuBox03",
* multiple: false,
* openIndex: []
* }
* menuBox.init(config03, dataObj03);
*
* var dataObj04 = JSON.stringify(dataObj03);
* var config04 = {
* menuBoxId: "#menuBox04",
* multiple: true,
* openIndex: []
* }
* menuBox.init(config04, dataObj04);
*
* @author DarkRanger
* http: //www.cnblogs.com/wrcold520/
*/ ! function($, JSON, checkutil) {
"use strict"; var menuBox = function() {};
//要配置的menuBox的菜单id
menuBox.menuBoxId = undefined;
//是否可以显示多个上级菜单的子菜单
menuBox.multiple = false;
//默认关闭所有一级菜单
menuBox.openIndex = []; //menuBox初始化方法
menuBox.init = function(config, data) { var cntMenuBox = new menuBox(); var menuBoxEle;
//定义上级菜单spMenu数组
var spMenus; var boxId = config.menuBoxId;
var menuBoxEle = $(boxId); if(boxId == undefined) {
console.warn("Your menuBox config has not key['menuBoxId'], configure failed!!!\nPlease configure your unique menuBox by MenuBoxId!");
return;
} else if(menuBoxEle.length == 0) {
console.warn("Cannot find your menuBox[id: " + boxId + "], configure failed!!! ");
return;
} else {
cntMenuBox.menuBoxId = $(config.menuBoxId) ? config.menuBoxId : undefined;
menuBoxEle = $(cntMenuBox.menuBoxId);
if(data) {
genDomByData(menuBoxEle, data);
}
} if(config.multiple == undefined) {
console.warn("Your config has not key['multiple'], default value is false that means you could open one spMenu at most at the same time!");
} else {
cntMenuBox.multiple = config.multiple;
} if(config.openIndex == undefined) {
console.warn("your config has not key['openIndex'] , default value is a Number 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;
}
}
}
};
/**
* 循环创建dom树
* @param {Object} menuBoxEle menuBoxEle的根元素（Jquery对象元素）
* @param {Object} data
*/
function genDomByData(menuBoxEle, data) {
var dataObj;
//JS Object or JS Array
if(checkutil.isArray(data)) {
dataObj = data;
} else if(checkutil.isObject(data)) {
dataObj = [data];
}
//JSONString
else if(checkutil.isString(data)) {
var menuObj;
try {
var menuJson = JSON.parse(data);
if(checkutil.isArray(menuJson)) {
menuObj = menuJson;
} else if(checkutil.isObject(menuJson)) {
menuObj = [menuJson];
}
dataObj = menuObj;
} catch(e) {
throw new Error("Please modify your data to a standard jsonString or Array!!!\n请修改您传入的data为标准的json字符串或者数组！！！");
}
} //创建ul
var spMenuBoxEle = $("<ul>", {
"class": "spMenuBox",
});
//循环创建li
$.each(dataObj, function(index, spMenuItem) { var spMenuItemEle = $("<li>", {
"class": "spMenuItem"
});
//创建li下面的div
var spMenuDiv = $("<div>", {
"class": "spMenu",
}); //创建div下面文本前面的icon
var iconBefore = $("<i>", {
"class": spMenuItem.iconClasses,
});
//创建文本
var menuSpan = $("<span>", {
text: spMenuItem.name,
});
//创建div下面文本后面的icon
var iconAfter = $("<i>", {
"class": "fa fa-2x fa-angle-down"
}); iconBefore.appendTo(spMenuDiv);
menuSpan.appendTo(spMenuDiv);
iconAfter.appendTo(spMenuDiv); spMenuDiv.appendTo(spMenuItemEle);
//创建子menu的ul
var subMenuBox = $("<ul>", {
"class": "subMenuBox",
})
$.each(spMenuItem.subMenus, function(index, subMenu) {
//<li><span class="subMenu">菜单1.1</span></li>
var subMenuItem = $("<li>", {})
var subMenuSpan = $("<a>", {
"class": "subMenu",
"href": subMenu.url,
text: subMenu.name
})
subMenuSpan.appendTo(subMenuItem);
subMenuItem.appendTo(subMenuBox);
});
subMenuBox.appendTo(spMenuItemEle); spMenuItemEle.appendTo(spMenuBoxEle);
});
spMenuBoxEle.appendTo(menuBoxEle);
} 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;
}($, JSON, checkutil);
源码下载地址：menuBox1.1.zip
html自定义垂直导航菜单（加强版--自定义传入menu参数，支持JSONArray、JSArray、JSONObject、JSObject）的更多相关文章
- html自定义垂直导航菜单
html自定义垂直导航菜单(目前只支持上级+下级两级菜单) 由于工作的需要,昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单,可以通过js配置的方式初始化菜单box(测试环境:chrome 49 ...
- html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）
这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...
- Android开发之自定义局部导航菜单
如今,要实现导航功能方案有很多.比如: 1.用3.0+自带的Toolbar + Fragment导航. 2.用Tabhost实现导航.小弟学浅,就只用过这两种方案实现导航. 但是这两种方案都有一个很明 ...
- h5+css 垂直导航菜单
http://blog.csdn.net/baidu_32731497/article/details/51814427
- 为SharePoint网站创建自定义导航菜单
转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...
- ABP之展现层（导航菜单）
基本的增删改查已经粗糙的结束了,接下来就是要方便的展示了,也就是导航菜单.在Abp中已经对导航栏的设置进行了相应的封装(Abp.Application.Navigation),可以方便我们快速的将自己 ...
- WordPress入门 之 设置导航菜单
WordPress 3.0 添加了一个自定义导航菜单的功能,让你可以很自由地设置网站的导航菜单.现在大多数的主题也都支持这个功能了,那么,究竟该如何设置WordPress导航菜单?今天倡萌就介绍一下. ...
- 使用CSS创建有图标的网站导航菜单
在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...
随机推荐
- javascript中把一个数组的内容全部赋值给另外一个数组
如:var a = [1,2,3,4];var b= [];b = a;这个不是把值赋值过去而是b作为a的引用,b改变的是a如何b指向的是一个新数组,a把元素值全部赋值过去? 1.普通数组可以使用 ...
- oracle数据库单表查询
今天给大家分享的是关于数据库的单表查询,像单表查询/多表查询/分组查询/子查询,这些方法的使用在实际项目过程中会经常用到,作为一名合格的测试人员如果不会数据库那肯定是不行的,行走江湖可能随时会面临被侮 ...
- Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites
Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites By Tom FitzMacken|February 17, 20 ...
- 第08章-使用Spring Web Flow
使用Spring Web Flow Spring Web Flow是Spring MVC的扩展,它支持开发基于流程的应用程序.它将流程的定义与实现流程行为的类和视图分离开来. 1 在Spring中配置 ...
- 基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta htt ...
- MongoDB整理笔记の指定命令和指定文件
MongoDB shell 不仅仅是一个交互式的shell,它也支持执行指定javascript 文件,也支持执行指定的命令片断.有了这个特性,就可以将MongoDB 与linux shell 完美结 ...
- mysql事务隔离级别回顾
事务隔离级别是针对读数据库数据的一种规则.事务隔离级别是数据库属性不是事务属性. 1.读未提交(read uncommited) 可以读到其他事务修改未提交的数据.(有 脏读,不可重复读,幻读) 事务 ...
- 洛谷P4015 运输问题（费用流）
传送门 源点向仓库连费用$0$,流量为储量的边,商店向汇点连费用$0$,流量为需求的边,然后仓库向商店连流量$inf$,费用对应的边,跑个费用流即可 //minamoto #include<io ...
- [译文]Casperjs1.1.0参考文档-安装
安装 Casperjs能被安装在mac osx,windows 和大多数linux版本 依赖项 PhantomJS1.82及以上 Python2.6及以上(很多人忘了安装python导致安装失败) 1 ...
- 《Andrew Ng深度学习》笔记5
深层神经网络 深层神经网络的组成如图,这里主要是深层神经网络符号的定义. 为什么要用深层神经网络,有什么好处?这里主要是分层的思想.在软件工程中,如果问题遇到困难,一般是通过“加多”一层的方法来解决, ...