layui侧边栏怎么实现双排侧边栏（左侧极窄主图标+右侧二级）-Layui教程-PHP中文网

layui 本身不原生支持双排侧边栏，但可通过自定义 html 结构、css 样式和 javascript 逻辑实现：左侧极窄图标栏（48px）仅显示一级图标，右侧常规侧边栏动态展开对应二级菜单，配合 flex 布局、状态同步与 dom 操作完成交互。

layui侧边栏怎么实现双排侧边栏（左侧极窄主图标+右侧二级）

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><!-- 右侧二级菜单栏 -->
</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，二级栏默认只显示当前激活的一组子菜单。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

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); }); });