Layui 本身不原生支持双排侧边栏，但可通过自定义 HTML 结构、CSS 样式和 JavaScript 逻辑实现：左侧极窄图标栏（48px）仅显示一级图标，右侧常规侧边栏动态展开对应二级菜单，配合 flex 布局、状态同步与 DOM 操作完成交互。
layui 本身不原生支持“双排侧边栏”（即左侧极窄图标栏 + 右侧可展开的二级菜单栏），但可以通过组合 lay-sider、自定义 CSS 和 JavaScript 逻辑轻松实现。核心思路是：用两个并列的 layui-layout 区域（或两个独立的 div），左侧固定极窄宽度（如 48px），只放一级图标；右侧为常规侧边栏，按需展开对应的一级菜单下的二级项。
1. HTML 结构：两个并排的侧边栏容器
不使用 layui 的单个 layui-layout，而是手动布局两个 div，左侧为图标栏，右侧为内容栏：
<div class="layui-layout layui-layout-admin">
<!-- 左侧极窄图标栏 -->
<div class="sidebar-icon" id="sidebarIcon">
<ul class="icon-menu">
<li data-menu="home"><i class="layui-icon"></i></li>
<li data-menu="user"><i class="layui-icon"></i></li>
<li data-menu="system"><i class="layui-icon"></i></li>
</ul>
</div>
<p><!-- 右侧二级菜单栏 -->
<div class="sidebar-sub" id="sidebarSub">
<ul class="layui-nav layui-nav-tree" lay-shrink="true">
<li class="layui-nav-item layui-this">
<a href="javascript:;"><i class="layui-icon layui-icon-home"></i>首页</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-user"></i>用户管理</a>
<dl class="layui-nav-child">
<dd><a href="#/user/list">用户列表</a></dd>
<dd><a href="#/user/role">角色权限</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-set"></i>系统设置</a>
<dl class="layui-nav-child">
<dd><a href="#/sys/config">系统配置</a></dd>
<dd><a href="#/sys/log">操作日志</a></dd>
</dl>
</li>
</ul>
</div></p><p><!-- 主体区域 -->
<div class="layui-body">
<div style="padding: 20px;">主内容区</div>
</div>
</div>2. CSS 样式：固定左栏 + 右栏自适应 + 图标对齐
关键点：左侧绝对定位或 flex 布局控制宽度，右侧占据剩余空间，图标栏 hover 显示 tooltip，二级栏默认只显示当前激活的一组子菜单。
body { margin: 0; }
.layui-layout-admin { display: flex; min-height: 100vh; }
<p>.sidebar-icon {
width: 48px;
background-color: #2f4056;
color: #fff;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.icon-menu {
padding: 12px 0;
list-style: none;
margin: 0;
}
.icon-menu li {
text-align: center;
padding: 10px 0;
cursor: pointer;
font-size: 18px;
}
.icon-menu li:hover {
background-color: #3a526b;
}
.icon-menu li.layui-this {
background-color: #009688;
}</p><p>.sidebar-sub {
width: 200px;
background-color: #2f4056;
color: #fff;
overflow-y: auto;
flex-shrink: 0;
}
.layui-nav-tree .layui-nav-item a {
color: #ccc;
padding-left: 20px;
}
.layui-nav-tree .layui-nav-item a:hover,
.layui-nav-tree .layui-nav-item.layui-this > a {
color: #fff;
background-color: #1a2837;
}
.layui-nav-tree .layui-nav-child dd a {
color: #999;
padding-left: 40px;
}
.layui-nav-tree .layui-nav-child dd a:hover {
color: #009688;
}</p><p>/<em> 隐藏二级菜单，仅保留当前激活项 </em>/
.layui-nav-tree .layui-nav-child { display: none; }
.layui-nav-item.layui-this > .layui-nav-child,
.layui-nav-item.layui-this > .layui-nav-child + .layui-nav-child { display: block; }</p>3. JS 交互：点击图标切换右侧菜单 + 同步高亮
监听左侧图标点击，动态更新右侧菜单的激活状态，并展开对应二级项。推荐用 layui 的 element 模块配合手动操作 DOM：
layui.use(['element'], function(){
var $ = layui.jquery;
var element = layui.element;
<p>// 初始化：默认展开第一个菜单
$('#sidebarSub .layui-nav-item').eq(0).addClass('layui-this');</p><p>// 点击左侧图标切换
$('.icon-menu li').on('click', function(){
var menuKey = $(this).data('menu');</p><pre class='brush:php;toolbar:false;'>// 清除所有高亮
$('.icon-menu li').removeClass('layui-this');
$('#sidebarSub .layui-nav-item').removeClass('layui-this');
// 高亮当前图标
$(this).addClass('layui-this');
// 查找并激活对应菜单项（根据 data-menu 或文本匹配）
var targetItem = $('#sidebarSub .layui-nav-item').filter(function(){
return $(this).find('a').text().indexOf(
{'home':'首页','user':'用户管理','system':'系统设置'}[menuKey]
) > -1;
});
if(targetItem.length){
targetItem.addClass('layui-this');
// 展开其子菜单
targetItem.find('.layui-nav-child').show();
// 收起其他子菜单
$('#sidebarSub .layui-nav-item:not(.layui-this) .layui-nav-child').hide();
}});
// 可选：鼠标悬停显示文字提示（tooltip） $('.icon-menu li').each(function(){ var title = {'home':'首页','user':'用户管理','system':'系统设置'}[$(this).data('menu')]; $(this).attr('title', title); }); });
4. 进阶建议
- 将菜单数据抽成 JSON，通过 JS 渲染左右两栏，提升可维护性
- 左侧图标栏增加「收起/展开」切换按钮（如箭头图标），支持一键展开为完整菜单（48px → 200px）
- 使用
localStorage记住用户上次选择的菜单项，刷新后自动恢复 - 二级菜单支持路由跳转时自动高亮（配合
router.push或 hash 监听） - 为移动端添加响应式处理：小屏下隐藏左侧图标栏，仅保留右侧菜单
这种双排结构在中后台系统中很实用——既节省空间又保持导航可达性。不依赖第三方插件，纯 layui + 原生能力就能落地，关键是把 DOM 结构、样式隔离和 JS 状态同步三者配合好。
