Laravel-admin修改菜单颜色样式自定义代码写法-php教程-PHP中文网

在 laravel-admin 中修改菜单颜色样式主要通过自定义 css 实现，推荐在 header.blade.php 的中注入 style 标签或使用 public/admin/css/admin.css 文件，配合 .sidebar-menu、.treeview-menu 等类精准覆盖，并注意添加 !important 和适配 active 状态。

laravel-admin修改菜单颜色样式自定义代码写法

在 Laravel-admin 中修改菜单颜色样式，主要通过自定义 CSS 实现，因为其后台默认使用 AdminLTE 2.x 的侧边栏结构，菜单 DOM 具有明确的 class（如 .sidebar-menu、.treeview-menu、.active 等），可精准覆盖。

在 resources/views/admin/layout/header.blade.php 中注入自定义 CSS

这是最常用且推荐的方式，避免修改 vendor 文件，便于升级维护。在该文件的区域末尾添加 style 标签：

Laravel

避免常见的Laravel错误：N+1查询、批量赋值、缓存陷阱及队列序列化陷阱。

下载

<style>
/* 修改一级菜单文字颜色和背景 */
.sidebar-menu > li > a {
    color: #4a5568 !important;
    border-left: 3px solid transparent;
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
    background-color: #3182ce !important;
    color: #fff !important;
    border-left: 3px solid #4299e1 !important;
}
<p>/<em> 修改二级菜单（折叠项）背景与悬停 /
.treeview-menu > li > a {
color: #718096 !important;
}
.treeview-menu > li:hover > a,
.treeview-menu > li.active > a {
background-color: #ebf8ff !important;
color: #2b6cb0 !important;
}<p>/<em> 可选：高亮当前选中菜单项的图标颜色 /
.sidebar-menu li.active i {
color: #4299e1 !important;
}
</style>

使用 admin.css 全局样式文件（更规范）

在 public/admin/css/admin.css 中追加菜单样式（需确保该文件被 layout 正确引入）：

若未创建，手动新建 public/admin/css/admin.css
在 resources/views/admin/layout/master.blade.php 的中确认已加载：
<link rel="stylesheet" href="%7B%7B%20admin_asset('css/admin.css')%20%7D%7D">
将上述 CSS 写入 admin.css，支持后续复用和压缩

动态控制菜单高亮逻辑（配合路由）

Laravel-admin 默认根据当前 URL 自动添加 .active 类，但有时需手动干预（例如菜单指向资源索引页，但子页面也应高亮）：

在菜单定义中使用 'label' => '用户管理' + 'url' => admin_url('users') 即可自动匹配
若需扩展匹配规则（如 /users/1/edit 也高亮 users 菜单），可在 app/Admin/bootstrap.php 中调整：
Admin::navbar()->can('show', \App\Models\User::class); 配合自定义 active 判断逻辑
或直接在菜单数组中加 'active' => request()->is('users*')（仅限静态菜单）