本文实例为大家分享了JS实现左侧菜单工具栏的具体代码，供大家参考，具体内容如下
摘要
该js脚本可帮助你快速实现左侧菜单工具栏。通过js封装成一个方法类，直接new该对象即可快速生成左侧菜单工具栏。
一、效果展示
二、menu.js文件
（1）WenMenuNode节点
let WenMenuNode = function ({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? wenMenu,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes = {},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? subs = [],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? parentElement = null,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? iconHTML = '',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? level = 1,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? parentNode = null,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? isActive = false,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onLaunch = null,
? ? ? ? ? ? ? ? ? ? ? ? ? ? }) {
? ? this._level = level;
? ? this._text = text;
? ? this._attributes = attributes;
? ? this._wenMenu = wenMenu;
? ? this._subs = subs;
? ? this._onLaunch = onLaunch;
? ? this._childHeight = 0;
? ? this._height = 0;
? ? this.style = {
? ? ? ? childHeight: 0,
? ? }
?
? ? this._parentElement = parentElement;
? ? this._parentNode = parentNode;
? ? this._element = this._wenMenu.createElement('li', {
? ? ? ? class: "wen-menu-li",
? ? });
? ? this._textElement = this._wenMenu.createElement('a', this._attributes);
? ? this._iconHTML = iconHTML;
? ? this._childNodes = [];
? ? this._childElement = null;
? ? this._activeChild = null;
? ? if (this._parentElement) this._parentElement.append(this._element);
? ? this._isActive = isActive;
? ? if (this._isActive) {
? ? ? ? if (this._level == 1) {
? ? ? ? ? ? this._wenMenu._activeMenu = this;
? ? ? ? } else if (this._parentNode) {
? ? ? ? ? ? this._parentNode._activeChild = this;
? ? ? ? }
? ? }
? ? this.create().onLaunch();
}
?
?
WenMenuNode.prototype.create = function () {
? ? let a = this._textElement;
? ? let icon = this._wenMenu.createElement('i', {
? ? ? ? class: "wen-menu-icon",
? ? })
? ? if (this._level > 1) {
? ? ? ? a.innerHTML = '<span class="wen-menu-tree">--</span>';
? ? }
? ? icon.innerHTML = this._iconHTML;
? ? a.append(icon);
? ? a.innerHTML += `<span class="wen-menu-text">${this._text}</span>`;
? ? if (this._level == 1) {
? ? ? ? a.classList.add('wen-menu-first');
? ? }
? ? this._element.append(a);
? ? if (this._subs.length) {
? ? ? ? let ul = this._wenMenu.createElement('ul', {
? ? ? ? ? ? class: "wen-menu-ul" + (this._level == 1 ? " wen-menu-ul-second" : ""),
? ? ? ? });
? ? ? ? this._element.append(ul);
?
? ? ? ? this._childElement = ul;
? ? ? ? this._subs.forEach((item, i) => {
? ? ? ? ? ? let node = new WenMenuNode({
? ? ? ? ? ? ? ? text: item.text,
? ? ? ? ? ? ? ? wenMenu: this._wenMenu,
? ? ? ? ? ? ? ? attributes: item.attributes,
? ? ? ? ? ? ? ? subs: item.subs,
? ? ? ? ? ? ? ? parentElement: ul,
? ? ? ? ? ? ? ? iconHTML: item.iconHTML,
? ? ? ? ? ? ? ? level: this._level + 1,
? ? ? ? ? ? ? ? parentNode: this,
? ? ? ? ? ? ? ? isActive: this._isActive && i == 0,
? ? ? ? ? ? ? ? onLaunch: (childNode) => {
? ? ? ? ? ? ? ? ? ? this._childNodes.push(childNode);
? ? ? ? ? ? ? ? ? ? if (i == this._subs.length - 1) {
? ? ? ? ? ? ? ? ? ? ? ? this.setEventListener(true);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? });
? ? } else {
? ? ? ? this.setEventListener(false);
? ? }
? ? return this;
}
?
?
WenMenuNode.prototype.onLaunch = function () {
? ? if (this._onLaunch) {
? ? ? ? this._onLaunch.call(this._parentNode, this);
? ? }
? ? return this;
}
?
WenMenuNode.prototype.setEventListener = function (hasSub = false) {
? ? if (hasSub) {
? ? ? ? this._height = this._subs.length * this._wenMenu._menuHeight;
? ? ? ? this._childHeight = this._childElement.clientHeight;
? ? ? ? if (this._isActive) {
? ? ? ? ? ? this._textElement.setAttribute('wen-active', '');
? ? ? ? ? ? this._textElement.setAttribute('wen-expand', '');
? ? ? ? ? ? this.style.childHeight = this._childHeight + this._wenMenu._menuSpacing;
? ? ? ? } else {
? ? ? ? ? ? this._textElement.setAttribute('wen-icon', '')
? ? ? ? ? ? this._textElement.setAttribute('wen-collapse', '');
? ? ? ? ? ? this.style.childHeight = 0;
? ? ? ? }
? ? ? ? this._childElement.style.height = this.style.childHeight + "px";
? ? ? ? this._textElement.addEventListener('click', (e) => {
? ? ? ? ? ? if (this._wenMenu._autoCollapse) {
? ? ? ? ? ? ? ? this.resetHeight();
? ? ? ? ? ? ? ? this.setHeight({
? ? ? ? ? ? ? ? ? ? menuNode: this,
? ? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? let height = 0, target = e.target;
? ? ? ? ? ? ? ? if (target.classList.value.indexOf('wen-menu-text') >= 0) {
? ? ? ? ? ? ? ? ? ? target = target.parentElement;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (target.getAttribute('wen-expand') === null) {
? ? ? ? ? ? ? ? ? ? // todo:: 展开
? ? ? ? ? ? ? ? ? ? height = this.style.childHeight = this._height + this._wenMenu._menuSpacing;
? ? ? ? ? ? ? ? ? ? target.setAttribute('wen-expand', '');
? ? ? ? ? ? ? ? ? ? target.removeAttribute('wen-collapse');
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // todo:: 收起
? ? ? ? ? ? ? ? ? ? height = -this.style.childHeight;
? ? ? ? ? ? ? ? ? ? this.style.childHeight = 0;
? ? ? ? ? ? ? ? ? ? target.setAttribute('wen-collapse', '');
? ? ? ? ? ? ? ? ? ? target.removeAttribute('wen-expand');
? ? ? ? ? ? ? ? ? ? this.resetHeight(this._childNodes)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this._childElement.style.height = this.style.childHeight + 'px';
? ? ? ? ? ? ? ? if (this._parentNode) {
? ? ? ? ? ? ? ? ? ? this.setHeight({
? ? ? ? ? ? ? ? ? ? ? ? menuNode: this._parentNode,
? ? ? ? ? ? ? ? ? ? ? ? direction: 'up',
? ? ? ? ? ? ? ? ? ? ? ? childHeight: height,
? ? ? ? ? ? ? ? ? ? ? ? childNode: this,
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? } else {
? ? ? ? if (this._isActive) {
? ? ? ? ? ? this._textElement.classList.add('wen-active');
? ? ? ? }
? ? ? ? this._textElement.addEventListener('click', (e) => {
? ? ? ? ? ? if (this._wenMenu._autoCollapse) {
? ? ? ? ? ? ? ? this.resetHeight();
? ? ? ? ? ? ? ? this.setHeight({
? ? ? ? ? ? ? ? ? ? menuNode: this._parentNode,
? ? ? ? ? ? ? ? ? ? direction: 'up',
? ? ? ? ? ? ? ? ? ? childNode: this,
? ? ? ? ? ? ? ? ? ? childHeight: this._height,
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? this.removeActive(this._wenMenu._activeMenu)
? ? ? ? ? ? this._isActive = true;
? ? ? ? ? ? this._textElement.classList.add('wen-active');
? ? ? ? ? ? let target = e.target;
? ? ? ? ? ? if (target.classList.value.indexOf('wen-menu-text') >= 0) {
? ? ? ? ? ? ? ? target = target.parentElement;
? ? ? ? ? ? }
? ? ? ? ? ? if (target.classList.value.indexOf('wen-menu-first') >= 0) {
? ? ? ? ? ? ? ? this._wenMenu._activeMenu = this;
? ? ? ? ? ? } else if (this._parentNode) {
? ? ? ? ? ? ? ? this.addActive(this._parentNode, this)
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? this._wenMenu._activeMenu = this;
? ? ? ? ? ? }
? ? ? ? ? ? if (this._wenMenu._event) {
? ? ? ? ? ? ? ? this._wenMenu._event.call(this, e)
? ? ? ? ? ? }
? ? ? ? });
? ? }
? ? return this;
}
?
?
WenMenuNode.prototype.setHeight = function ({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? menuNode = null,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? direction = 'down',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? childHeight = 0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? childNode = null,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }) {
? ? if (!menuNode) {
? ? ? ? return 0;
? ? }
? ? menuNode._textElement.setAttribute('wen-expand', '');
? ? menuNode._textElement.removeAttribute('wen-collapse');
? ? if (this._wenMenu._autoCollapse) {
? ? ? ? menuNode.style.childHeight = menuNode._height;
? ? }
? ? if (direction == 'down') {
? ? ? ? if (menuNode._subs.length) {
? ? ? ? ? ? menuNode.style.childHeight += (this._wenMenu._menuSpacing * (childNode ? childNode._level : 1));
? ? ? ? ? ? if (menuNode._isActive) {
? ? ? ? ? ? ? ? menuNode.style.childHeight += this.setHeight({
? ? ? ? ? ? ? ? ? ? menuNode: menuNode._activeChild,
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? if (menuNode._childElement) {
? ? ? ? ? ? ? ? menuNode._childElement.style.height = menuNode.style.childHeight + "px";
? ? ? ? ? ? }
? ? ? ? ? ? if (menuNode._parentNode) {
? ? ? ? ? ? ? ? this.setHeight({
? ? ? ? ? ? ? ? ? ? menuNode: menuNode._parentNode,
? ? ? ? ? ? ? ? ? ? direction: 'up',
? ? ? ? ? ? ? ? ? ? childNode: menuNode,
? ? ? ? ? ? ? ? ? ? childHeight: menuNode.style.childHeight,
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }
? ? } else {
? ? ? ? menuNode.style.childHeight += (childHeight + this._wenMenu._menuSpacing);
? ? ? ? menuNode._childElement.style.height = menuNode.style.childHeight + "px";
? ? ? ? if (menuNode._parentNode) {
? ? ? ? ? ? this.setHeight({
? ? ? ? ? ? ? ? menuNode: menuNode._parentNode,
? ? ? ? ? ? ? ? direction: 'up',
? ? ? ? ? ? ? ? childHeight: menuNode.style.childHeight,
? ? ? ? ? ? ? ? childNode: menuNode,
? ? ? ? ? ? });
? ? ? ? }
? ? }
? ? return menuNode.style.childHeight;
}
?
WenMenuNode.prototype.resetHeight = function (menuNodes) {
? ? if (!menuNodes) {
? ? ? ? menuNodes = this._wenMenu._menuNodes;
? ? }
? ? menuNodes.forEach((node) => {
? ? ? ? if (node._childElement) {
? ? ? ? ? ? node.style.childHeight = 0;
? ? ? ? ? ? node._childElement.style.height = '0px';
? ? ? ? }
? ? ? ? if (node._childNodes.length) {
? ? ? ? ? ? node._textElement.setAttribute('wen-collapse', '');
? ? ? ? ? ? node._textElement.removeAttribute('wen-expand');
? ? ? ? ? ? this.resetHeight(node._childNodes);
? ? ? ? }
? ? });
? ? return this;
}
?
WenMenuNode.prototype.addActive = function (menuNode, activeChildNode) {
? ? menuNode._isActive = true
? ? menuNode._textElement.setAttribute('wen-active', '');
? ? menuNode._textElement.removeAttribute('wen-icon');
? ? if (this._wenMenu._autoCollapse) {
? ? ? ? menuNode._textElement.setAttribute('wen-expand', '');
? ? ? ? menuNode._textElement.removeAttribute('wen-collapse');
? ? }
? ? menuNode._activeChild = activeChildNode;
? ? if (menuNode._parentNode) {
? ? ? ? this.addActive(menuNode._parentNode, menuNode);
? ? } else {
? ? ? ? this._wenMenu._activeMenu = menuNode;
? ? }
? ? return this;
}
?
/**
?* 去除active属性
?* @param ? ?WenMenuNode menuNode
?* @return ? ?WenMenuNode
?*/
WenMenuNode.prototype.removeActive = function (menuNode) {
? ? menuNode._isActive = false;
? ? if (menuNode._subs.length) {
? ? ? ? menuNode._textElement.removeAttribute('wen-active');
? ? ? ? menuNode._textElement.setAttribute('wen-icon', '');
? ? ? ? if (this._wenMenu._autoCollapse) {
? ? ? ? ? ? menuNode._textElement.setAttribute('wen-collapse', '');
? ? ? ? ? ? menuNode._textElement.removeAttribute('wen-expand');
? ? ? ? }
? ? ? ? if (menuNode._activeChild) {
? ? ? ? ? ? this.removeActive(menuNode._activeChild);
? ? ? ? }
? ? } else {
? ? ? ? menuNode._textElement.classList.remove('wen-active');
? ? }
? ? return this;
}
（2） WenMenu对象
let WenMenu = function ({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ele,
? ? ? ? ? ? ? ? ? ? ? ? ? ? menus,
? ? ? ? ? ? ? ? ? ? ? ? ? ? event = null,
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes = {},
? ? ? ? ? ? ? ? ? ? ? ? ? ? menuHeight = 35,
? ? ? ? ? ? ? ? ? ? ? ? ? ? menuSpacing = 0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? autoCollapse = true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? duration = 300,
? ? ? ? ? ? ? ? ? ? ? ? }) {
? ? this._ele = ele;
? ? this._duration = duration;
? ? this._menus = menus;
? ? this._event = event;
? ? this._menuNodes = [];
? ? this._autoCollapse = autoCollapse;
? ? this.style = {
? ? ? ? width: '100%',
? ? ? ? height: '100%',
? ? }
? ? this._menuElement = this.createElement('ul', attributes);
? ? this._menuElement.classList.value += 'wen-menu-ul wen-menu-ul-first';
? ? this._ele.append(this._menuElement);
? ? this._activeMenu = null;
? ? this._menuHeight = menuHeight;
? ? this._menuSpacing = menuSpacing;
? ? this.init().createStyle().createMenu();
};
?
WenMenu.prototype.init = function () {
? ? if (this._ele.clientHeight) {
? ? ? ? this._ele.style.overflow = 'hidden';
? ? ? ? this._menuElement.style['overflow-y'] = 'scroll';
? ? ? ? let scrollWidth = this._menuElement.offsetWidth - this._menuElement.clientWidth;
? ? ? ? this.style.width = 'calc(100% + ' + scrollWidth + 'px)';
? ? ? ? this.style.height = this._ele.clientHeight + 'px';
? ? }
? ? return this;
}
?
/**
?* 创建菜单
?*/
WenMenu.prototype.createMenu = function () {
? ? this._menus.forEach((item, i) => {
? ? ? ? let node = new WenMenuNode({
? ? ? ? ? ? text: item.text,
? ? ? ? ? ? attributes: item.attributes,
? ? ? ? ? ? subs: item.subs,
? ? ? ? ? ? parentElement: this._menuElement,
? ? ? ? ? ? wenMenu: this,
? ? ? ? ? ? isActive: i == 0,
? ? ? ? });
? ? ? ? this._menuNodes.push(node);
? ? });
? ? return this;
};
?
/**
?* 创建元素
?* @param ? ?tagName
?* @param ? ?attributes
?* @returns ? ?{HTMLElement}
?*/
WenMenu.prototype.createElement = function (tagName, attributes = {}) {
? ? let ele = document.createElement(tagName);
?
? ? function checkValue(value) {
? ? ? ? if (Object.prototype.toString.call(value) === "[object Array]") {
? ? ? ? ? ? value = value.join(',');
? ? ? ? } else if (Object.prototype.toString.call(value) === '[object Object]') {
? ? ? ? ? ? var valueStr = '';
? ? ? ? ? ? Object.keys(value).forEach(function (name) {
? ? ? ? ? ? ? ? valueStr += name + ":" + checkValue(value[name]) + ";";
? ? ? ? ? ? });
? ? ? ? ? ? value = valueStr;
? ? ? ? }
? ? ? ? return value;
? ? }
?
? ? if (attributes) {
? ? ? ? Object.keys(attributes).forEach((name) => {
? ? ? ? ? ? let value = checkValue(attributes[name]);
? ? ? ? ? ? ele.setAttribute(name, value);
? ? ? ? })
? ? }
? ? return ele;
};
?
?
WenMenu.prototype.createStyle = function () {
? ? let style = this.createElement('style'),
? ? ? ? head = document.querySelector('head');
? ? style.innerHTML = `
? ? ? ? .wen-menu-ul-first, .wen-menu-ul-first *{
? ? ? ? ? ? padding: 0px;
? ? ? ? ? ? margin: 0px;
? ? ? ? ? ? border-spacing: 0px;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .wen-menu-ul-first{
? ? ? ? ? ? width: ${this.style.width};
? ? ? ? ? ? height: ${this.style.height};
? ? ? ? }
? ? ? ? .wen-menu-ul {
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ??
? ? ? ? .wen-menu-ul-first, .wen-menu-ul-second {
? ? ? ? ? ? background: rgba(0, 0, 0, 0.1);
? ? ? ? }
? ? ? ? .wen-menu-li {
? ? ? ? ? ? padding-left: 22px;
? ? ? ? ? ? -webkit-box-sizing: border-box;
? ? ? ? ? ? -moz-box-sizing: border-box;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? }
? ? ? ? .wen-menu-ul-first > .wen-menu-li {
? ? ? ? ? ? padding: 0px;
? ? ? ? }
? ? ? ? .wen-menu-ul-second > .wen-menu-li {
? ? ? ? ? ? padding: 0px 0px 0px 18px;
? ? ? ? }
? ? ? ? .wen-menu-tree {
? ? ? ? ? ? border-left: 1px dashed rgba(0, 0, 0, 1);
? ? ? ? ? ? width: 16px;
? ? ? ? }
? ? ? ? .wen-menu-text{
? ? ? ? ? ? width: calc(100% - 16px);
? ? ? ? ? ? display: flex;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? white-space: nowrap;
? ? ? ? ? ? text-overflow: ellipsis;
? ? ? ? ? ? -o-text-overflow: ellipsis;
? ? ? ? }
? ? ? ? .wen-menu-li a {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: ${this._menuHeight}px;
? ? ? ? ? ? -webkit-box-sizing: border-box;
? ? ? ? ? ? -moz-box-sizing: border-box;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? align-items: center;
? ? ? ? }
? ? ? ? .wen-menu-ul, .wen-menu-li a[wen-icon]:after, .wen-menu-li a[wen-active]:after {
? ? ? ? ? ? -webkit-transition: all ${this._duration}ms linear;
? ? ? ? ? ? -moz-transition: all ${this._duration}ms linear;
? ? ? ? ? ? -ms-transition: all ${this._duration}ms linear;
? ? ? ? ? ? -o-transition: all ${this._duration}ms linear;
? ? ? ? ? ? transition: all ${this._duration}ms linear;
? ? ? ? }
? ? ? ? .wen-menu-li a[wen-expand]:after {
? ? ? ? ? ? -webkit-transform: scale(1.3) rotate(90deg);
? ? ? ? ? ? -moz-transform: scale(1.3) rotate(90deg);
? ? ? ? ? ? -ms-transform: scale(1.3) rotate(90deg);
? ? ? ? ? ? -o-transform: scale(1.3) rotate(90deg);
? ? ? ? ? ? transform: scale(1.3) rotate(90deg);
? ? ? ? }
? ? ? ? .wen-menu-li a[wen-collapse]:after {
? ? ? ? ? ? -webkit-transform: scale(1.3) rotate(180deg);
? ? ? ? ? ? -moz-transform: scale(1.3) rotate(180deg);
? ? ? ? ? ? -ms-transform: scale(1.3) rotate(180deg);
? ? ? ? ? ? -o-transform: scale(1.3) rotate(180deg);
? ? ? ? ? ? transform: scale(1.3) rotate(180deg);
? ? ? ? }
? ? ? ? .wen-menu-li a[wen-icon]:after {
? ? ? ? ? ? content: '?';
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 5px;
? ? ? ? ? ? font-weight: bold;
? ? ? ? }
? ? ? ? .wen-menu-li a[wen-active]:after {
? ? ? ? ? ? content: '?';
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 5px;
? ? ? ? ? ? font-weight: bold;
? ? ? ? }
? ? ? ? .wen-menu-first {
? ? ? ? ? ? padding-left: 15px !important;
? ? ? ? }
? ? ? ? .wen-menu-li a[wen-active], .wen-active {
? ? ? ? ? ? color: white;
? ? ? ? }
? ? ? ? .wen-menu-li a[wen-active].wen-menu-first, .wen-active.wen-menu-first {
? ? ? ? ? ? border-left: 3px solid white;
? ? ? ? }
? ? `;
? ? if (!head) {
? ? ? ? head = document.body;
? ? }
? ? head.append(style);
? ? return this;
}
三、Example-Code
（1）html文件
<!doctype html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport"
? ? ? ? ? content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>说明文档</title>
? ? <script src="/js/canvas/menu.js"></script>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? padding: 0px;
? ? ? ? ? ? margin: 0px;
? ? ? ? ? ? border-spacing: 0px;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? min-height: 100vh;
? ? ? ? ? ? padding: 0px;
? ? ? ? ? ? margin: 0px;
? ? ? ? }
? ? ? ? .readme-title {
? ? ? ? ? ? background: rgba(0, 0, 50, 0.3);
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? padding: 20px;
? ? ? ? ? ? -webkit-box-sizing: border-box;
? ? ? ? ? ? -moz-box-sizing: border-box;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? }
? ? ? ? .readme-body {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: calc(100% - 75px);
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: start;
? ? ? ? }
? ? ? ? .readme-menu-box {
? ? ? ? ? ? width: 250px;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? left: 0px;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? background: rgba(100, 10, 10, 0.2);
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? </style>
</head>
<body>
<div class="readme-body">
? ? <div class="readme-menu-box">
? ? ? ? <div class="readme-title">
? ? ? ? ? ? <h2>目录</h2>
? ? ? ? </div>
? ? </div>
</div>
</body>
</html>
（2）JS代码
a、菜单列表
let menuOptions = [{
? ? ? ? ? ? ? ? ? ? text: "导入数据列表",
? ? ? ? ? ? ? ? ? ? subs: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "全部数据",
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? subs: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "消费金额",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "放款金额",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "返佣金额",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "导入数据",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "查看",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "编辑",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "消费金额",
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "放款金额",
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "返佣金额",
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "导入数据",
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "查看",
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? text: "编辑",
? ? ? ? ? ? ? ? ? ? ? ? ? ? attributes: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "data-url": "",
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? text: "异常数据列表",
? ? ? ? ? ? ? ? ? ? subs: []
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? text: "数据修正",
? ? ? ? ? ? ? ? ? ? subs: []
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? text: "修正审核-客服经理",
? ? ? ? ? ? ? ? ? ? subs: []
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? text: "修正审核-财务",
? ? ? ? ? ? ? ? ? ? subs: []
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? text: "导入日志",
? ? ? ? ? ? ? ? ? ? subs: []
? ? ? ? ? ? ? ? }]
b、菜单实例化
window.onload = function () {
? ? ? ? ? ? new WenMenu({
? ? ? ? ? ? ? ? ele: document.querySelector('.readme-menu-box'), // 菜单插入的位置
? ? ? ? ? ? ? ? menus: menuOptions,
? ? ? ? ? ? ? ? event: function (e) { }, // 菜单最底端点击事件触发
? ? ? ? ? ? ? ? attributes: {}, // 最外层ul属性设置
? ? ? ? ? ? ? ? menuHeight: 35, // 每个菜单项的高度
? ? ? ? ? ? ? ? autoCollapse: true, // 是否自动收起无活动菜单
? ? ? ? ? ? })
? ? ? ? };
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did123593