Without further ado, let’s go straight to the code (the code is a bit long), and the renderings are attached at the back. Pay attention to the annotations in the code. I hope it can help friends in need! ! ! !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layout Large layout example of management interface - Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn.staticfile.org/layui/2.8.10/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-bg-black"><i class="layui-icon layui-icon-form"></i><span>Management System</span>
</div>
<!-- Head area (can cooperate with layui's existing horizontal navigation) -->
<ul class="layui-nav layui-layout-left">
<!--Mobile display -->
<li class="layui-nav-item layui-show-xs-inline-block " lay-header-event="menuLeft">
<!-- The li tag above is different from the original one copied -->
<i class="layui-icon layui-icon-spread-left" id="icon">
</i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 11</a></dd>
<dd><a href="javascript:;">menu 22</a></dd>
<dd><a href="javascript:;">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img src="//unpkg.com/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profile</a></dd>
<dd><a href="javascript:;">Settings</a></dd>
<dd><a href="javascript:;">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- Left navigation area (can cooperate with layui's existing vertical navigation) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">
<i class="layui-icon layui-icon-spread-left"></i><span>menu
groups1</span></a>
<dl class="layui-nav-child">
<!-- Change the lay-href here to the path of the page you click to jump to -->
<dd><a href="javascript:;" class="link-active" lay-href="demoForm.html" data-id="1"
data-title="Page 1"><i class="layui-icon layui-icon-spread-left"></i><span>menu
x</span></a></dd>
<dd><a href="javascript:;" class="link-active" lay-href="test.html" data-id="2"
data-title="Page 2"><i class="layui-icon layui-icon-spread-left"></i><span>menu
2</span></a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-spread-left"></i><span>menu
groups2</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="javascript:;">Hyperlink</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
<li class="layui-nav-item"><a href="javascript:;">the links</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<div class="layui-tab" lay-filter="tables" lay-allowclose="true">
<ul class="layui-tab-title">
<!--This is different from the original copy-->
</ul>
<div class="layui-tab-content"></div>
</div>
<!-- Content body area -->
<div class="layui-footer">
<!-- Bottom fixed area -->
Bottom fixed area
</div>
</div>
</div>
<script src="//cdn.staticfile.org/layui/2.8.10/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function () {<!-- -->
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
var isShow = true;
//Header event
util.event('lay-header-event', {<!-- -->
menuLeft: function (othis) {<!-- --> // Left menu event
//Define a flag bit
//Select all spans and determine whether they are hidden, which is used to hide the content in the span behind the icon, but the icon is not hidden.
$('.layui-nav-item span').each(function () {<!-- -->
if ($(this).is(':hidden')) {<!-- -->
$(this).show();
} else {<!-- -->
$(this).hide();
};
});
$('.layui-header span').each(function () {<!-- -->//Same as above
if ($(this).is(':hidden')) {<!-- -->
$(this).show();
} else {<!-- -->
$(this).hide();
};
});
//Determine the status of isshow
if (isShow) {<!-- -->//Collapse
$('.layui-side.layui-bg-black').width(60); //Set the width
$('.layui-logo').width(60);
// $('.kit-side-fold i').css('margin-right', '70%'); //Modify the position of the icon
$('#icon').removeClass("layui-icon-spread-left"); //Modify the icon
$('#icon').addClass("layui-icon-shrink-right"); //Modify the icon
$('.layui-side li').removeClass("layui-nav-itemed");//Uncheck the secondary navigation bar
//Modify the width of footer and body
$('.layui-layout-left').css('left', 60 + 'px');
$('.layui-body').css('left', 60 + 'px');
$('.layui-footer').css('left', 60 + 'px');
//Hide the secondary navigation bar
// $('dd span').each(function () {<!-- -->
// $(this).hide();
// });
//Modify flag bit
isShow = false;
} else {<!-- -->//Expand
$('.layui-side.layui-bg-black').width(200);
$('.layui-logo').width(200);
// $('.kit-side-fold i').css('margin-right', '10%');
$('.layui-layout-left').css('left', 200 + 'px');
$('.layui-body').css('left', 200 + 'px');
$('.layui-footer').css('left', 200 + 'px');
$('dd span').each(function () {<!-- -->
$(this).show();
});
$('#icon').addClass("layui-icon-spread-left"); //Modify the icon
$('#icon').removeClass("layui-icon-shrink-right"); //Modify the icon
isShow = true;
};
},
menuRight: function () {<!-- --> // Right menu event
layer.open({<!-- -->
type: 1,
title: 'more',
content: '<div style="padding: 15px;">Processing operations on the right panel</div>',
area: ['260px', '100%'],
offset: 'rt', // upper right corner
anim: 'slideLeft', // Slide out from the right drawer
shadeClose: true,
scrollbar: false
});
}
});
});
</script>
<script>//JavaScript code area
layui.use(['element', 'layer', 'jquery'], function () {<!-- -->
var element = layui.element;
var $ = layui.jquery;
//Left menu click event
$('.link-active').on('click', function () {<!-- -->
var dataid = $(this);
//Determine whether the tab already exists
var isExist = false;
$.each($('.layui-tab-title li[lay-id]'), function () {<!-- -->
//Determine whether the subject has the same lay-id as the clicked tab
if ($(this).attr('lay-id') == dataid.attr("data-id")) {<!-- -->
isExist = true;
}
});
//Does not exist, add tab
if (isExist == false) {<!-- -->
tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));
}
//Tab exists, just go to the tab you want to open at this time, no need to add a new one
tabFunction.tabChange(dataid.attr('data-id'));
});
//Define function to bind several events such as adding tab, deleting tab, and switching tab.
var tabFunction = {<!-- -->
//Add tab url page address id corresponding to data-id name title
tabAdd: function (url, id, name) {<!-- -->
element.tabAdd('tables', {<!-- -->
title: name,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:800px"></ iframe>',
id: id
});
},
//Switch tabs based on id
tabChange: function (id) {<!-- -->
element.tabChange('tables', id)
},
//Close the specified tab
tabDelete: function (id) {<!-- -->
element.tabDelete('tables', id)
}
}
});
</script>
</body>
</html>
Click menu menu to display page 1
Implement switching
Click on the icon as shown below
OK!!!