html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）
这次在原先html自定义垂直导航菜单的基础上做了比较大的改动：
1、去掉了font-awesome图标，上级菜单右边的箭头是自己用css写的，具体参考《css三角箭头》。
2、去掉了初始化时候打开的菜单的属性openIndex（考虑到多级菜单子菜单的打开方式，暂时去掉），添加了superLevel（默认是0，即当前添加的不论是一个JSArray还是JSObject，我们都将作为一级菜单（0+1）处理。）
3、将二级导航变为多级导航菜单，可以无限添加子菜单，你只需要在treeMenu.css的合适的地方添加或者修改自己的每个级别的css样式即可，这里我默认处理了三级菜单的样式。
3、在TreeMenu中添加圆角边框，添加鼠标滑过后的菜单Hover样式。
看下效果图（个人觉得比较素雅，完全有自己的元素在里面，修改起来很方便）：
用到的css：
treeMenu.css
用到的js：
jquery-1.9.1.js
json2.js
checkutil.js（自己随手写的一个检测js对象类型的工具）
treeMenu.js（※※※※※这个才是重点 - -）
上代码（源码地址：http://files.cnblogs.com/files/wrcold520/TreeMenu.zip，html、css、js中的注释很详尽，如果有不对的地方，欢迎留言，3Q！！！）：
html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/treeMenu.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/treeMenu.js"></script>
<title></title>
</head>
<style>
body {
background: lightgray;
} .TreeMenuList>div {
margin: 5px;
} .TreeMenuList {
/**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;
}
</style> <body>
<div class="TreeMenuList">
<div id="TreeMenu01"></div>
<div id="TreeMenu02"></div>
</div>
<div class="TreeMenuList">
<div id="TreeMenu03"></div>
<div id="TreeMenu04"></div>
</div>
</body>
<script>
var menus01 = [{
name: "menu1",
href: "",
subMenus: [{
name: "menu1.1",
href: "",
subMenus: [{
name: "menu1.1.1",
href: "#menu1.1.1",
}, {
name: "menu1.1.2",
href: "#menu1.1.2"
}]
}, {
name: "menu1.2",
href: "#menu1.2",
subMenus: [{
name: "menu1.2.1",
href: "#menu1.2.1"
}, {
name: "menu1.2.2",
href: "#menu1.2.2"
}]
}, {
name: "menu1.3",
href: "#menu1.3",
subMenus: [{
name: "menu1.3.1",
href: "#menu1.3.1"
}, {
name: "menu1.3.2",
href: "#menu1.3.2"
}]
}]
}, {
name: "menu2",
href: "",
subMenus: [{
name: "menu2.1",
href: "",
subMenus: [{
name: "menu2.1.1",
href: "#menu2.1.1"
}, {
name: "menu2.1.2",
href: "#menu2.1.2"
}]
}, {
name: "menu2.2",
href: "#",
subMenus: [{
name: "menu2.2.1",
href: "#menu2.2.1"
}, {
name: "menu2.2.2",
href: "#menu2.2.2"
}]
}, {
name: "menu2.3",
href: "#menu2.3",
subMenus: [{
name: "menu2.3.1",
href: "#menu2.3.1"
}, {
name: "menu2.3.2",
href: "#menu2.3.2"
}]
}]
}, {
name: "menu3",
href: "",
subMenus: [{
name: "menu3.1",
href: "",
subMenus: [{
name: "menu3.1.1",
href: "#menu3.1.1"
}, {
name: "menu3.1.2",
href: "#menu3.1.2"
}]
}, {
name: "menu3.2",
href: "#",
subMenus: [{
name: "menu3.2.1",
href: "#menu3.2.1"
}, {
name: "menu3.2.2",
href: "#menu3.2.2"
}]
}, {
name: "menu3.3",
href: "#menu3.3",
subMenus: [{
name: "menu3.3.1",
href: "#menu3.3.1"
}, {
name: "menu3.3.2",
href: "#menu3.3.2"
}]
}]
}];
var menus02 = JSON.stringify(menus01); var menus03 = {
name: "menu1",
href: "",
subMenus: [{
name: "menu1.1",
href: "",
subMenus: [{
name: "menu1.1.1",
href: "#menu1.1.1",
}, {
name: "menu1.1.2",
href: "#menu1.1.2"
}]
}, {
name: "menu1.2",
href: "#menu1.2",
subMenus: [{
name: "menu1.2.1",
href: "#menu1.2.1"
}, {
name: "menu1.2.2",
href: "#menu1.2.2"
}]
}, {
name: "menu1.3",
href: "#menu1.3",
subMenus: [{
name: "menu1.3.1",
href: "#menu1.3.1"
}, {
name: "menu1.3.2",
href: "#menu1.3.2"
}]
}]
};
var menus04 = JSON.stringify(menus03);
var config01 = {
treeMenuId: "#TreeMenu01",
superLevel: 0,
multiple: true,
};
var config02 = {
treeMenuId: "#TreeMenu02",
superLevel: 0,
multiple: false
};
var config03 = {
treeMenuId: "#TreeMenu03",
superLevel: 0,
multiple: true
}
var config04 = {
treeMenuId: "#TreeMenu04",
superLevel: 0,
multiple: false
}
treeMenu.init(menus01, config01);
treeMenu.init(menus02, config02);
treeMenu.init(menus03, config03);
treeMenu.init(menus04, config04);
</script> </html>
treeMenu.css：
.TreeMenu {
/** TreeMenu整体样式 **/
font-family: "edwardian script itc";
min-width: 300px;
}
.TreeMenu> .MenuBox {
/** 不能选择文本 **/
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.TreeMenu> .Radius {
/** 圆角边框，添加圆角半径的上下Padding **/
background: white;
border: 1px solid darkgray;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
padding-top: 8px;
padding-bottom: 8px;
}
.TreeMenu ul,
.TreeMenu ol {
/** 去掉TreeMenu下面ul/ol的默认样式 **/
list-style: none;
margin:;
padding:;
}
.TreeMenu .MenuName {
/** 所有菜单名称的样式 ，flex布局，垂直居中，两端对齐**/
align-items: center;
/**flexbox兼容**/
display: flex;
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 */
/**flexbox兼容**/
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.TreeMenu .Level-1 .MenuName {
/** 一级菜单菜单名称样式 **/
color: mediumpurple;
font-size: 20px;
padding: 8px 10px 8px 10px;
}
.TreeMenu .Level-2 .MenuName {
/** 二级菜单菜单名称样式 **/
color: darkred;
font-size: 18px;
padding: 8px 10px 8px 20px;
}
.TreeMenu .Level-3 .MenuName {
/** 三级菜单菜单名称样式 **/
color: darkslategrey;
font-size: 16px;
padding: 8px 10px 8px 30px;
}
.TreeMenu .MenuName:hover {
/** 鼠标滑过菜单样式 **/
background: #E3E3E3;
font-weight:;
}
.TreeMenu .Level-1 {
/** 一级菜单li **/
border-bottom: 1px solid gainsboro;
}
.TreeMenu .Level-1:last-child {
/** 最后一个一级菜单左下、右下圆角 **/
border-bottom: 0px;
}
.TreeMenu .Level-2 {
/** 二级菜单li **/
border-top: 1px solid gainsboro;
margin: 0px 10px;
}
.TreeMenu .Level-3 {
/** 三级菜单li **/
border-top: 1px solid gainsboro;
margin: 0px 20px;
}
.TreeMenu .TreeArrowDown {
/** 右边三角箭头的样式 **/
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid darkgray;
display: inline-block;
width: 0px;
height: 0px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.TreeMenu .Level.active .TreeArrowDown.rotate {
/** 选中当前菜单右边三角箭头逆时针旋转180度 **/
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.TreeMenu .Level .MenuBox {
/** 默认不显示所有下级菜单 **/
display: none;
}
.TreeMenu a,
.TreeMenu a:link,
.TreeMenu a:hover,
.TreeMenu a:active,
.TreeMenu a:visited {
/** 去掉a标签样式 **/
color: inherit;
text-decoration: none;
}
treeMenu.js：
/**
* //1、menu01: JS Array
* var menus01 = [{
* name: "menu1",
* href: "",
* subMenus: [{
* name: "menu1.1",
* href: "",
* subMenus: [{
* name: "menu1.1.1",
* href: "#menu1.1.1",
* }, {
* name: "menu1.1.2",
* href: "#menu1.1.2"
* }]
* },
* ....//省略若干子菜单
* ]
* },
* ...//省略若干菜单
* ];
*
* //2、menu02：JSON Array
* var menus02 = JSON.stringify(menus01);
*
* //3、menu03: JS Object
* var menus03 = {
* name: "menu1",
* href: "",
* subMenus: [{
* name: "menu1.1",
* href: "",
* subMenus: [{
* name: "menu1.1.1",
* href: "#menu1.1.1",
* }, {
* name: "menu1.1.2",
* href: "#menu1.1.2"
* }]
* }, {
* name: "menu1.2",
* href: "#menu1.2",
* subMenus: [{
* name: "menu1.2.1",
* href: "#menu1.2.1"
* }, {
* name: "menu1.2.2",
* href: "#menu1.2.2"
* }]
* }, {
* name: "menu1.3",
* href: "#menu1.3",
* subMenus: [{
* name: "menu1.3.1",
* href: "#menu1.3.1"
* }, {
* name: "menu1.3.2",
* href: "#menu1.3.2"
* }]
* }]
* };
*
* //4、JSON object
* var menus04 = JSON.stringify(menus03);
*
* var config01 = {
* treeMenuId: "#TreeMenu01", //required
* superLevel: 0, //optional
* multiple: true, //optional
* };
*
* var config02 = {
* treeMenuId: "#TreeMenu02", //required
* superLevel: 0, //optional
* multiple: false //optional
* };
*
* var config03 = {
* treeMenuId: "#TreeMenu03", //required
* superLevel: 0, //optional
* multiple: true //optional
* }
*
* var config04 = {
* treeMenuId: "#TreeMenu04", //required
* superLevel: 0, //optional
* multiple: false //optional
* }
* treeMenu.init(menus01, config01);
* treeMenu.init(menus02, config02);
* treeMenu.init(menus03, config03);
* treeMenu.init(menus04, config04);
*
* @author DarkRanger
* see more https://coding.net/u/wrcold520/p/TreeMenu-Simple-Tree-Menu-js/git/tree/master/TreeMenu
*
*/
! function($, JSON, checkutil) {
"use strict"; var treeMenu = {}; treeMenu.name = "MenuTree-Simple Left Navigation Tree Menu";
treeMenu.version = "version-1.0";
treeMenu.author = "DarkRanger";
treeMenu.email = "15934179313@163.com";
treeMenu.url = "https://coding.net/u/wrcold520/p/TreeMenu-Simple-Tree-Menu-js/git/tree/master/TreeMenu"; treeMenu.config = function() {}; treeMenu.init = function(datas, config) {
var menuConfig = new treeMenu.config();
if(checkutil.isUndefined(datas)) {
console.log("The function treeMenu.init() doesn't have the parameter 'datas' that means the treeMenu has no Datas!");
return;
} else {
//JS Object or JS Array
if(checkutil.isArray(datas)) {
menuConfig.menus = datas;
} else if(checkutil.isObject(datas)) {
menuConfig.menus = [datas];
}
//JSONString
else if(checkutil.isString(datas)) {
var menuObj;
try {
var menuJson = JSON.parse(datas);
if(checkutil.isArray(menuJson)) {
menuObj = menuJson;
} else if(checkutil.isObject(menuJson)) {
menuObj = [menuJson];
}
menuConfig.menus = menuObj;
} catch(e) {
throw new Error(e);
}
} if(checkutil.isUndefined(menuConfig.menus)) {
console.warn("datas is not jsonString or JS Object or JS Array, configure failed!!!");
return;
}
}
if(checkutil.isUndefined(config)) {
console.log("The function treeMenu.init() doesn't have the parameter 'config' that means the treeMenu has no event!");
} else {
if(checkutil.isUndefined(config.treeMenuId)) {
console.warn("Your TreeMenu config has not key['treeMenuId'], configure failed!!!\nPlease configure your unique treeMenu by treeMenuId!");
return;
} else if($(config.treeMenuId).length == 0) {
console.warn("Cannot find your treeMenu[id: " + config.treeMenuId + "], configure failed!!! ");
return;
} else {
menuConfig.treeMenuId = config.treeMenuId;
}
if(checkutil.isUndefined(config.superLevel)) {
console.warn("Your config has not key['superLevel'], default value is 0 that means you your datalist'superlevel is 0!");
menuConfig.superLevel = 0;
} else if(!checkutil.isNumber(config.superLevel)) {
console.warn("Your config's parameter['superLevel'] shoule be a Number, configure failed!");
return;
} else {
menuConfig.superLevel = config.superLevel;
}
if(checkutil.isUndefined(config.multiple)) {
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!");
menuConfig.multiple = false;
} else {
menuConfig.multiple = config.multiple;
} menuConfig.multiple = config.multiple;
}
genDomTree(menuConfig);
initEvent(menuConfig);
} /**
* 生成dom树
* @param {Object} menuConfig
*/
function genDomTree(menuConfig) {
var $treeMenu = $(menuConfig.treeMenuId);
var menus = menuConfig.menus;
var multiple = menuConfig.multiple;
var hasTreeMenuClass = $treeMenu.hasClass("TreeMenu");
if(hasTreeMenuClass === false) {
$treeMenu.addClass("TreeMenu");
}
var firstLevel = menuConfig.superLevel;
eachMenusDom($treeMenu, menus, firstLevel); } /**
* 递归生成dom树
* @param {Object} superEle 在哪个元素下添加子元素
* @param {Object} subMenus 子元素的集合 JS Array
* @param {Object} superLevel 上级元素的等级
*/
function eachMenusDom(superEle, subMenus, superLevel) {
var level = superLevel + 1;
var ulBox01 = $("<ul>", {
"class": "MenuBox MenuBox-" + level+" Radius",
});
$.each(subMenus, function(i, menu) {
var liItem = $("<li>", {
"class": "Level Level-" + level,
});
var menuNameDiv = $("<div>", {
"class": "MenuName",
});
var menuLink = $("<a>"); var hasHref = menu.href && $.trim(menu.href).length > 0;
if(hasHref === true) {
menuLink.attr("href", menu.href);
}
var hasName = menu.name && menu.name.length > 0;
if(hasName === true) {
menuLink.text(menu.name);
} menuLink.appendTo(menuNameDiv);
menuNameDiv.appendTo(liItem);
liItem.appendTo(ulBox01);
ulBox01.appendTo(superEle);
var subMenus = menu.subMenus;
if(subMenus && checkutil.isArray(subMenus) && subMenus.length > 0) {
var arrowDownDiv = $("<div>", {
"class": "TreeArrowDown"
});
arrowDownDiv.appendTo(menuNameDiv);
eachMenusDom(liItem, subMenus, level);
}
});
}
/**
* 初始化点击事件
* @param {Object} menuConfig
*/
function initEvent(menuConfig) {
$(menuConfig.treeMenuId + " .MenuName").on("click", function() {
var $arrow = $(this).find(".TreeArrowDown");
var $menuBox = $(this).next();
var $menuItem = $(this).parent();
$menuBox.slideToggle();
$arrow.toggleClass("rotate");
$menuItem.toggleClass("active");
if(menuConfig.multiple === false) {
var $brothers = $menuItem.siblings();
$brothers.find(".MenuBox").slideUp();
$brothers.find(".TreeArrowDown").removeClass("rotate");
$brothers.removeClass("active");
}
});
} window.treeMenu = treeMenu; }($, JSON, checkutil);
附上源码：TreeMenu.zip
html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）的更多相关文章
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce&q ...
- jquery自定义插件-参数化配置多级菜单导航栏插件
1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...
- html自定义垂直导航菜单（加强版--自定义传入menu参数，支持JSONArray、JSArray、JSONObject、JSObject）
在上一篇中我简单写了个html自定义垂直导航菜单,缺点很明显,里面的数据是固定死的,不能动态更改数据. 这里我重写了一个修改版的垂直二级导航菜单,将原先的menuBox.init(config);修改 ...
- html自定义垂直导航菜单
html自定义垂直导航菜单(目前只支持上级+下级两级菜单) 由于工作的需要,昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单,可以通过js配置的方式初始化菜单box(测试环境:chrome 49 ...
- bootstrap历练实例： 垂直胶囊式的导航菜单
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- vue+element UI递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- vue+element UI以组件递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 在ECSHOP后台左侧导航中增加新菜单
在ECSHOP后台左侧导航中增加新菜单 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-11-08 有个别高级用户(懂PHP的),提到这样的问题: 在后台管 ...
随机推荐
- 黑盒测试实践--Day5 11.29
黑盒测试实践--Day5 11.29 今天完成任务情况: 分析系统需求,完成场景用例设计 小组负责测试的同学学习安装自动测试工具--QTP,并在线学习操作 小黄 今天的任务是完成场景测试用例的设计.在 ...
- jQuery中关于toggle的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>t ...
- Struts2获取Action中的数据
当我们用Struts2框架开发时,经常有要获取jsp页面的数据或者在jsp中获取后台传过来的数据(Action),那么怎么去获取自己想要的数据呢? 后台获取前端数据: 在java程序中生成要获取字段的 ...
- ios7适配--navgationbar遮住下面view的处理
3down votefavorite Have you guys stumbled up on this issue ? Basically in iOS 7 Navigation Control ...
- Hadoop安装所遇问题及解决方法
1.错误:java.io.IOException: File /hadoop/hadooptmp/mapred/system/jobtracker.info could only be replica ...
- IIS 6.0 发布网站使用教程
原文地址:http://wenku.baidu.com/view/95d8b49851e79b89680226aa.html
- linux系统安全及应用——系统引导和登录控制
一.开关机安全控制 1)调整BIOS将第一引导设备设为当前系统所在硬盘 2)调整BIOS禁止从其他设备(光盘.U盘.网络)引导系统 3)调整BIOS将安全级别设为setup,并设置管理员密码 4)禁用 ...
- 简述ref与out区别
1.相同点:两者都是按地址(引用)传递的,使用后都将改变原来参数的数值. 2.区别:ref可以把参数的数值传递进函数,但是out是要把参数清空(声明时不必显示初始化),就是说你无法把一个数值从out传 ...
- c语言数据结构学习心得——数据结构基本概念
1.数据>数据元素>数据项 数据的基本单位是数据元素,数据元素的基本单位是数据项 2.运算的定义->针对逻辑结构 集合:同属于一个集合,无其他关系.(数学上的集合) 线性结 ...
- SDUT OJ 数据结构实验之图论十：判断给定图是否存在合法拓扑序列
数据结构实验之图论十:判断给定图是否存在合法拓扑序列 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Prob ...