侧边栏菜单的JS初始化
这里直接放出整个页面的代码，主要注意的点是：
菜单位置
<nav class="sidebar-main"></nav>整个菜单，只需留着这一行即可，里面的内容全部删除。
index.min.js的位置
<script type="text/javascript" src="js/index.min.js"></script>index.min.js 需要放到最后面，因为里面有tab插件的初始化，需要在菜单初始化后，获取首页菜单的链接地址。
页面代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<meta name="author" content="yinq">
<title>首页 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap-multitabs/multitabs.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
<body class="lyear-index">
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--左侧导航-->
<aside class="lyear-layout-sidebar">
<!-- logo -->
<div id="logo" class="sidebar-header">
<a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
</div>
<div class="lyear-layout-sidebar-info lyear-scroll">
<nav class="sidebar-main"></nav>
<div class="sidebar-footer">
<p class="copyright">
<span>Copyright © 2022. </span>
<a target="_blank" href="http://www.bixiaguangnian.com">笔下光年</a>
<span> All rights reserved.</span>
</p>
</div>
</div>
</aside>
<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar">
<div class="navbar-left">
<div class="lyear-aside-toggler">
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
</div>
</div>
<ul class="navbar-right d-flex align-items-center">
<!--顶部消息部分-->
<li class="dropdown dropdown-notice">
<!-- // 这里省略了 顶部消息 的代码 // -->
</li>
<!--End 顶部消息部分-->
<!--切换主题配色-->
<li class="dropdown dropdown-skin">
<!-- // 这里省略了 配色 的代码 // -->
</li>
<!--End 切换主题配色-->
<!--个人头像内容-->
<li class="dropdown">
<!-- // 这里省略了 个人头像内容 的代码 // -->
</li>
<!--End 个人头像内容-->
</ul>
</nav>
</header>
<!--End 头部信息-->
<!--页面主要内容-->
<main class="lyear-layout-content">
<div id="iframe-content"></div>
</main>
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multitabs/multitabs.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript">
// 使用
var menu_list = [{"id":"1","name":"后台首页","url":"lyear_main_1_v5.html","pid":0,"icon":"mdi mdi-home","is_out":0,"is_home":1},{"id":"2","name":"布局示例","url":"#!","pid":0,"icon":"mdi mdi-palette","is_out":0,"is_home":0},{"id":"3","name":"表单布局示例","url":"lyear_layout_form.html","pid":2,"icon":"","is_out":0,"is_home":0},{"id":"4","name":"聊天页面示例","url":"lyear_layout_chat.html","pid":2,"icon":"","is_out":0,"is_home":0},{"id":"5","name":"logo处使用文字","url":"lyear_layout_logo_text.html","pid":2,"icon":"","is_out":1,"is_home":0},{"id":"6","name":"多级菜单","url":"#!","pid":0,"icon":"mdi mdi-menu","is_out":0,"is_home":0},{"id":"7","name":"一级菜单","url":"#!","pid":6,"icon":"","is_out":0,"is_home":0},{"id":"8","name":"一级菜单","url":"#!","pid":6,"icon":"","is_out":0,"is_home":0},{"id":"9","name":"二级菜单","url":"#!","pid":8,"icon":"","is_out":0,"is_home":0},{"id":"10","name":"二级菜单","url":"#!","pid":8,"icon":"","is_out":0,"is_home":0},{"id":"11","name":"三级菜单","url":"#!","pid":10,"icon":"","is_out":0,"is_home":0},{"id":"12","name":"三级菜单","url":"#!","pid":10,"icon":"","is_out":0,"is_home":0}];
setSidebar(menu_list);
/**
* 菜单
* @param data 菜单JSON数据
* id 菜单唯一ID
* name 菜单名称
* url 菜单链接地址
* icon 图标
* pid 父级ID
* is_out 是否外链0否|1是,外链a标签没有class='multitabs'
* is_home 是否首页
*/
function setSidebar(data){
if (data.length == 0) return false;
var treeObj = getTrees(data, 0, 'id', 'pid', 'children');
html = createMenu(treeObj, true);
$('.sidebar-main').append(html);
}
function createMenu(data, is_frist) {
var menu_body = is_frist ? '<ul class="nav-drawer">' : '<ul class="nav nav-subnav">';
for(var i = 0; i < data.length; i++){
iframe_class = data[i].is_out == 1 ? 'target="_blank"' : 'class="multitabs"';
icon_div = data[i].pid == 0 ? '<i class="' + data[i].icon + '"></i>' : '';
selected = (data[i].pid == 0) && (data[i].is_home == 1) ? 'active' : '';
menuName = data[i].pid == 0 ? '<span>' + data[i].name + '</span>' : data[i].name;
homeIdName = (data[i].pid == 0) && (data[i].is_home == 1) ? 'id="default-page"' : '';
if (data[i].children && data[i].children.length > 0) {
menu_body += '<li class="nav-item nav-item-has-subnav"><a href="javascript:void(0)">' + icon_div + menuName + '</a>';
menu_body += createMenu(data[i].children);
} else {
menu_body += '<li class="nav-item ' + selected + '"><a href="' + data[i].url + '" '+ iframe_class + homeIdName + '>' + icon_div + menuName + '</a>';
}
menu_body += '</li>';
}
menu_body += '</ul>';
return menu_body;
};
/**
* 树状的算法
* @params list 代转化数组
* @params parentId 起始节点
* @params idName 主键ID名
* @params parentIdName 父级ID名称
* @params childrenName 子级名称
* @author CSDN博主「伤包子」
*/
function getTrees(list, parentId, idName, parentIdName, childrenName) {
let items= {};
// 获取每个节点的直属子节点，*记住是直属，不是所有子节点
for (let i = 0; i < list.length; i++) {
let key = list[i][parentIdName];
if (items[key]) {
items[key].push(list[i]);
} else {
items[key] = [];
items[key].push(list[i]);
}
}
return formatTree(items, parentId, idName, childrenName);
}
/**
* 利用递归格式化每个节点
*/
function formatTree(items, parentId, idName, childrenName) {
let result = [];
if (!items[parentId]) {
return result;
}
for (let t in items[parentId]) {
items[parentId][t][childrenName] = formatTree(items, items[parentId][t][idName], idName, childrenName)
result.push(items[parentId][t]);
}
return result;
}
</script>
<!--这里将index.min.js放到最后，这样初始化菜单后再执行tab插件-->
<script type="text/javascript" src="js/index.min.js"></script>
</body>
</html>该代码文件可在插件项目中找到。